forge-edit 0.1.0-beta.4 → 0.1.0-beta.6

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.
Files changed (4) hide show
  1. package/dist/index.js +1215 -607
  2. package/package.json +3 -2
  3. package/README.md +0 -216
  4. package/dist/index.css +0 -2
package/dist/index.js CHANGED
@@ -43,89 +43,118 @@ function c(t, n, r, i, a, o) {
43
43
  //#endregion
44
44
  //#region src/components/shared/toolbar/Style/Components/StyleToolbar.jsx
45
45
  function l() {
46
+ let e = "forge-dropdown-item block w-full text-left cursor-pointer whitespace-nowrap px-3 py-1 text-[#333] no-underline transition-colors duration-100 hover:bg-[#f0f0f0]";
46
47
  return /* @__PURE__ */ c("div", {
47
- className: "forge-toolbar-group forge-toolbar-style",
48
+ className: "forge-toolbar-group forge-toolbar-style flex items-center gap-0.5",
48
49
  children: /* @__PURE__ */ c("div", {
49
- className: "forge-toolbar-group",
50
+ className: "relative group",
50
51
  children: [/* @__PURE__ */ c("button", {
51
52
  type: "button",
52
- className: "forge-toolbar-button",
53
+ className: "forge-toolbar-button group relative flex h-7 cursor-pointer items-center justify-center rounded-[2px] border border-[#ccc] bg-white px-2 text-sm leading-none transition-all duration-150 hover:bg-[#f0f0f0] active:translate-y-px [&.is-active]:bg-[#e5e5e5]",
53
54
  "data-command": "style",
54
55
  "aria-label": "Style",
55
56
  children: [/* @__PURE__ */ c("span", {
56
57
  className: "forge-icon",
57
58
  children: "✦"
58
59
  }), /* @__PURE__ */ c("span", {
59
- className: "forge-tooltip",
60
- "data-i18n": "style"
60
+ className: "pointer-events-none absolute left-1/2 top-[calc(100%+8px)] z-30 -translate-x-1/2 whitespace-nowrap rounded-md border border-[#2c2c2c] bg-[#1e1e1e] px-2.5 py-1 text-[11px] font-medium leading-none text-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100 group-has-[.is-open]:hidden rtl:left-1/2 rtl:-translate-x-1/2 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:border-x-[5px] before:border-b-[5px] before:border-t-0 before:border-solid before:border-x-transparent before:border-b-[#2c2c2c] after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:translate-y-[1px] after:border-x-[4px] after:border-b-[4px] after:border-t-0 after:border-solid after:border-x-transparent after:border-b-[#1e1e1e]",
61
+ "data-i18n": "style",
62
+ children: "Style"
61
63
  })]
62
64
  }), /* @__PURE__ */ c("div", {
63
- className: "forge-toolbar-dropdown forge-dropdown-style",
65
+ className: "forge-toolbar-dropdown forge-dropdown-style absolute left-0 top-[calc(100%+4px)] z-20 hidden [&.is-open]:block max-h-24 min-w-[110px] overflow-y-auto rounded-[2px] border border-[#ccc] bg-white p-0 shadow-[0_2px_6px_rgba(0,0,0,0.15)] rtl:left-auto rtl:right-0",
64
66
  role: "list",
65
67
  "aria-label": "Style",
66
68
  children: [
67
- /* @__PURE__ */ c("a", {
68
- className: "forge-dropdown-item",
69
- href: "#",
69
+ /* @__PURE__ */ c("button", {
70
+ type: "button",
71
+ className: e,
70
72
  "data-value": "p",
71
73
  role: "listitem",
72
- children: /* @__PURE__ */ c("p", { "data-i18n": "normal" })
74
+ children: /* @__PURE__ */ c("p", {
75
+ className: "m-0 text-[13px] font-normal leading-[1.4]",
76
+ children: "Normal"
77
+ })
73
78
  }),
74
- /* @__PURE__ */ c("a", {
75
- className: "forge-dropdown-item",
76
- href: "#",
79
+ /* @__PURE__ */ c("button", {
80
+ type: "button",
81
+ className: e,
77
82
  "data-value": "blockquote",
78
83
  role: "listitem",
79
- children: /* @__PURE__ */ c("blockquote", { "data-i18n": "blockquote" })
84
+ children: /* @__PURE__ */ c("blockquote", {
85
+ className: "m-0 text-[13px] font-normal leading-[1.4]",
86
+ children: "Blockquote"
87
+ })
80
88
  }),
81
- /* @__PURE__ */ c("a", {
82
- className: "forge-dropdown-item",
83
- href: "#",
89
+ /* @__PURE__ */ c("button", {
90
+ type: "button",
91
+ className: e,
84
92
  "data-value": "pre",
85
93
  role: "listitem",
86
- children: /* @__PURE__ */ c("pre", { "data-i18n": "code" })
94
+ children: /* @__PURE__ */ c("pre", {
95
+ className: "m-0 font-mono text-[13px] leading-[1.4]",
96
+ children: "Code"
97
+ })
87
98
  }),
88
- /* @__PURE__ */ c("a", {
89
- className: "forge-dropdown-item",
90
- href: "#",
99
+ /* @__PURE__ */ c("button", {
100
+ type: "button",
101
+ className: e,
91
102
  "data-value": "h1",
92
103
  role: "listitem",
93
- children: /* @__PURE__ */ c("h1", { "data-i18n": "header1" })
104
+ children: /* @__PURE__ */ c("h1", {
105
+ className: "m-0 text-[20px] font-normal leading-[1.4]",
106
+ children: "Heading 1"
107
+ })
94
108
  }),
95
- /* @__PURE__ */ c("a", {
96
- className: "forge-dropdown-item",
97
- href: "#",
109
+ /* @__PURE__ */ c("button", {
110
+ type: "button",
111
+ className: e,
98
112
  "data-value": "h2",
99
113
  role: "listitem",
100
- children: /* @__PURE__ */ c("h2", { "data-i18n": "header2" })
114
+ children: /* @__PURE__ */ c("h2", {
115
+ className: "m-0 text-[18px] font-normal leading-[1.4]",
116
+ children: "Heading 2"
117
+ })
101
118
  }),
102
- /* @__PURE__ */ c("a", {
103
- className: "forge-dropdown-item",
104
- href: "#",
119
+ /* @__PURE__ */ c("button", {
120
+ type: "button",
121
+ className: e,
105
122
  "data-value": "h3",
106
123
  role: "listitem",
107
- children: /* @__PURE__ */ c("h3", { "data-i18n": "header3" })
124
+ children: /* @__PURE__ */ c("h3", {
125
+ className: "m-0 text-[16px] font-normal leading-[1.4]",
126
+ children: "Heading 3"
127
+ })
108
128
  }),
109
- /* @__PURE__ */ c("a", {
110
- className: "forge-dropdown-item",
111
- href: "#",
129
+ /* @__PURE__ */ c("button", {
130
+ type: "button",
131
+ className: e,
112
132
  "data-value": "h4",
113
133
  role: "listitem",
114
- children: /* @__PURE__ */ c("h4", { "data-i18n": "header4" })
134
+ children: /* @__PURE__ */ c("h4", {
135
+ className: "m-0 text-[15px] font-normal leading-[1.4]",
136
+ children: "Heading 4"
137
+ })
115
138
  }),
116
- /* @__PURE__ */ c("a", {
117
- className: "forge-dropdown-item",
118
- href: "#",
139
+ /* @__PURE__ */ c("button", {
140
+ type: "button",
141
+ className: e,
119
142
  "data-value": "h5",
120
143
  role: "listitem",
121
- children: /* @__PURE__ */ c("h5", { "data-i18n": "header5" })
144
+ children: /* @__PURE__ */ c("h5", {
145
+ className: "m-0 text-[14px] font-normal leading-[1.4]",
146
+ children: "Heading 5"
147
+ })
122
148
  }),
123
- /* @__PURE__ */ c("a", {
124
- className: "forge-dropdown-item",
125
- href: "#",
149
+ /* @__PURE__ */ c("button", {
150
+ type: "button",
151
+ className: e,
126
152
  "data-value": "h6",
127
153
  role: "listitem",
128
- children: /* @__PURE__ */ c("h6", { "data-i18n": "header6" })
154
+ children: /* @__PURE__ */ c("h6", {
155
+ className: "m-0 text-[13px] font-normal leading-[1.4]",
156
+ children: "Heading 6"
157
+ })
129
158
  })
130
159
  ]
131
160
  })]
@@ -139,64 +168,300 @@ function u() {
139
168
  }
140
169
  //#endregion
141
170
  //#region src/components/shared/toolbar/font/Components/FontToolbar.jsx
142
- function d({ onCommand: e }) {
171
+ function d({ onCommand: e, isBold: t, isUnderline: n }) {
172
+ let r = "group relative flex h-7 w-7 items-center justify-center p-0 text-sm leading-none cursor-pointer transition-colors duration-150 active:translate-y-px", i = "bg-white text-[#333] hover:bg-[#f0f0f0]", a = "bg-[#e2e8f0] text-black border-inner shadow-[inset_0_1px_3px_rgba(0,0,0,0.2)] font-bold", o = "pointer-events-none absolute left-1/2 top-[calc(100%+8px)] z-30 -translate-x-1/2 whitespace-nowrap rounded-md border border-[#2c2c2c] bg-[#1e1e1e] px-2.5 py-1 text-[11px] font-medium leading-none text-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100 rtl:left-1/2 rtl:-translate-x-1/2 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:border-x-[5px] before:border-b-[5px] before:border-t-0 before:border-solid before:border-x-transparent before:border-b-[#2c2c2c] after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:translate-y-[1px] after:border-x-[4px] after:border-b-[4px] after:border-t-0 after:border-solid after:border-x-transparent after:border-b-[#1e1e1e]";
143
173
  return /* @__PURE__ */ c("div", {
144
- className: "forge-toolbar-group forge-toolbar-font",
174
+ className: "forge-toolbar-group forge-toolbar-font inline-flex items-center rounded-sm border border-[#ccc] bg-white divide-x divide-[#ccc] rtl:divide-x-reverse",
145
175
  children: [
146
176
  /* @__PURE__ */ c("button", {
147
177
  type: "button",
148
- className: "forge-toolbar-button forge-btn-bold",
178
+ className: `${r} ${t ? a : i}`,
149
179
  onClick: () => e("bold"),
150
180
  "aria-label": "Bold",
151
- children: [/* @__PURE__ */ c("strong", { children: "B" }), /* @__PURE__ */ c("span", {
152
- className: "forge-tooltip",
153
- "data-i18n": "bold"
181
+ children: [/* @__PURE__ */ c("span", {
182
+ className: "text-sm font-bold font-serif",
183
+ children: "B"
184
+ }), /* @__PURE__ */ c("span", {
185
+ className: o,
186
+ "data-i18n": "bold",
187
+ children: "Bold"
154
188
  })]
155
189
  }),
156
190
  /* @__PURE__ */ c("button", {
157
191
  type: "button",
158
- className: "forge-toolbar-button forge-btn-underline",
192
+ className: `${r} ${n ? a : i}`,
159
193
  onClick: () => e("underline"),
160
194
  "aria-label": "Underline",
161
- children: [/* @__PURE__ */ c("u", { children: "U" }), /* @__PURE__ */ c("span", {
162
- className: "forge-tooltip",
163
- "data-i18n": "underline"
195
+ children: [/* @__PURE__ */ c("span", {
196
+ className: "text-sm font-bold font-serif underline",
197
+ children: "U"
198
+ }), /* @__PURE__ */ c("span", {
199
+ className: o,
200
+ "data-i18n": "underline",
201
+ children: "Underline"
164
202
  })]
165
203
  }),
166
204
  /* @__PURE__ */ c("button", {
167
205
  type: "button",
168
- className: "forge-toolbar-button",
206
+ className: `${r} ${i}`,
169
207
  onClick: () => e("removeFormat"),
170
208
  "aria-label": "Remove Font Style",
171
- children: [/* @__PURE__ */ c("span", { children: "⌫" }), /* @__PURE__ */ c("span", {
172
- className: "forge-tooltip",
173
- "data-i18n": "removeFormat"
209
+ children: [/* @__PURE__ */ c("span", {
210
+ className: "inline-block h-4 w-4 text-center text-sm leading-none",
211
+ children: /* @__PURE__ */ c("svg", {
212
+ viewBox: "0 0 20 20",
213
+ className: "block h-4 w-4 fill-none stroke-black",
214
+ strokeWidth: "2",
215
+ children: /* @__PURE__ */ c("path", { d: "M 4 4 L 16 16 M 16 4 L 4 16" })
216
+ })
217
+ }), /* @__PURE__ */ c("span", {
218
+ className: o,
219
+ "data-i18n": "removeFormat",
220
+ children: "Remove Font Style"
174
221
  })]
175
222
  })
176
223
  ]
177
224
  });
178
225
  }
179
226
  //#endregion
227
+ //#region src/components/shared/toolbar/font/Hooks/boldHandler.jsx
228
+ var f = (e, t, n) => {
229
+ if (!e.collapsed) {
230
+ if (n) {
231
+ let t = e.commonAncestorContainer;
232
+ for (t.nodeType === 3 && (t = t.parentNode); t && t.getAttribute && t.getAttribute("contenteditable") !== "true";) {
233
+ if (t.style && t.style.fontWeight) {
234
+ if (t.style.fontWeight = "", !t.getAttribute("style")) {
235
+ let e = t.parentNode;
236
+ for (; t.firstChild;) e.insertBefore(t.firstChild, t);
237
+ e.removeChild(t);
238
+ }
239
+ break;
240
+ }
241
+ t = t.parentNode;
242
+ }
243
+ } else {
244
+ let t = e.extractContents(), n = document.createElement("span");
245
+ n.style.fontWeight = "bold", n.appendChild(t), e.insertNode(n);
246
+ }
247
+ return;
248
+ }
249
+ if (n) {
250
+ let n = e.startContainer, r = n.nodeType === 1 ? n : n.parentNode;
251
+ for (; r && r.getAttribute && r.getAttribute("contenteditable") !== "true" && !(r.style && r.style.fontWeight);) r = r.parentNode;
252
+ let i = document.createElement("span");
253
+ i.innerHTML = "​", r && r.parentNode ? r.nextSibling ? r.parentNode.insertBefore(i, r.nextSibling) : r.parentNode.appendChild(i) : e.insertNode(i);
254
+ let a = document.createRange();
255
+ a.setStart(i, 1), a.collapse(!0), t.removeAllRanges(), t.addRange(a);
256
+ } else {
257
+ let n = document.createElement("span");
258
+ n.style.fontWeight = "bold", n.innerHTML = "​", e.insertNode(n);
259
+ let r = document.createRange();
260
+ r.setStart(n, 1), r.collapse(!0), t.removeAllRanges(), t.addRange(r);
261
+ }
262
+ }, p = (e, t, n) => {
263
+ if (!e.collapsed) {
264
+ if (n) {
265
+ let t = e.commonAncestorContainer;
266
+ for (t.nodeType === 3 && (t = t.parentNode); t && t.getAttribute && t.getAttribute("contenteditable") !== "true";) {
267
+ if (t.style && t.style.textDecoration) {
268
+ if (t.style.textDecoration = "", !t.getAttribute("style")) {
269
+ let e = t.parentNode;
270
+ for (; t.firstChild;) e.insertBefore(t.firstChild, t);
271
+ e.removeChild(t);
272
+ }
273
+ break;
274
+ }
275
+ t = t.parentNode;
276
+ }
277
+ } else {
278
+ let t = e.extractContents(), n = document.createElement("span");
279
+ n.style.textDecoration = "underline", n.appendChild(t), e.insertNode(n);
280
+ }
281
+ return;
282
+ }
283
+ if (n) {
284
+ let n = e.startContainer, r = n.nodeType === 1 ? n : n.parentNode;
285
+ for (; r && r.getAttribute && r.getAttribute("contenteditable") !== "true" && !(r.style && r.style.textDecoration);) r = r.parentNode;
286
+ let i = document.createElement("span");
287
+ i.innerHTML = "​", r && r.parentNode ? r.nextSibling ? r.parentNode.insertBefore(i, r.nextSibling) : r.parentNode.appendChild(i) : e.insertNode(i);
288
+ let a = document.createRange();
289
+ a.setStart(i, 1), a.collapse(!0), t.removeAllRanges(), t.addRange(a);
290
+ } else {
291
+ let n = document.createElement("span");
292
+ n.style.textDecoration = "underline", n.innerHTML = "​", e.insertNode(n);
293
+ let r = document.createRange();
294
+ r.setStart(n, 1), r.collapse(!0), t.removeAllRanges(), t.addRange(r);
295
+ }
296
+ }, m = (e) => {
297
+ let t = document.createTreeWalker(e, NodeFilter.SHOW_TEXT, null, !1), n;
298
+ for (; n = t.nextNode();) n.nodeValue = n.nodeValue.replace(/\u00A0/g, " ");
299
+ }, h = (e) => {
300
+ e.querySelectorAll("span, b, u, strong").forEach((e) => {
301
+ let t = e.getAttribute("style") || e.getAttribute("class"), n = [
302
+ "B",
303
+ "U",
304
+ "STRONG"
305
+ ].includes(e.tagName);
306
+ if (!t && !n) {
307
+ let t = e.parentNode;
308
+ for (; e.firstChild;) t.insertBefore(e.firstChild, e);
309
+ t.removeChild(e);
310
+ } else (!e.textContent || e.textContent.replace(/\u200B/g, "").length === 0) && e.remove();
311
+ });
312
+ }, g = (e, t) => {
313
+ if (e.collapsed) return;
314
+ let n = e.commonAncestorContainer;
315
+ for (n.nodeType === 3 && (n = n.parentNode); n && n.getAttribute && n.getAttribute("contenteditable") !== "true";) {
316
+ let e = window.getComputedStyle(n).display;
317
+ if (e === "block" || e === "flex" || n.tagName === "PRE") break;
318
+ n = n.parentNode;
319
+ }
320
+ let r = e.extractContents().textContent.replace(/\u00A0/g, " "), i = document.createTextNode(r);
321
+ e.insertNode(i), n && n.getAttribute("contenteditable") !== "true" && (h(n), m(n), n.normalize());
322
+ let a = document.createRange();
323
+ a.selectNodeContents(i), t.removeAllRanges(), t.addRange(a);
324
+ };
325
+ //#endregion
180
326
  //#region src/components/shared/toolbar/font/Hooks/fontLogic.jsx
181
- function f() {
182
- return { executeCommand: (e) => {
183
- document.execCommand(e, !1, null);
184
- } };
327
+ function _() {
328
+ let [e, t] = i(!1), [r, a] = i(!1), o = () => {
329
+ let e = window.getSelection();
330
+ if (!e || e.rangeCount === 0) return;
331
+ let n = e.anchorNode;
332
+ if (!n) return;
333
+ n.nodeType === 3 && (n = n.parentNode);
334
+ let r = !1, i = !1;
335
+ for (; n && n.getAttribute && n.getAttribute("contenteditable") !== "true";) {
336
+ let e = window.getComputedStyle(n).fontWeight, t = window.getComputedStyle(n).textDecoration;
337
+ (e === "bold" || parseInt(e) >= 700 || n.tagName === "B" || n.tagName === "STRONG") && (r = !0), (t.includes("underline") || n.tagName === "U") && (i = !0), n = n.parentNode;
338
+ }
339
+ t(r), a(i);
340
+ };
341
+ return n(() => (document.addEventListener("selectionchange", o), () => document.removeEventListener("selectionchange", o)), []), {
342
+ executeCommand: (t) => {
343
+ let n = window.getSelection();
344
+ if (!n || n.rangeCount === 0) return;
345
+ let i = n.getRangeAt(0);
346
+ t === "bold" ? f(i, n, e) : t === "underline" ? p(i, n, r) : t === "removeFormat" && g(i, n), o();
347
+ },
348
+ isBold: e,
349
+ isUnderline: r
350
+ };
185
351
  }
186
352
  //#endregion
187
353
  //#region src/components/shared/toolbar/font/Components/index.jsx
188
- function p() {
189
- let { executeCommand: e } = f();
190
- return /* @__PURE__ */ c(d, { onCommand: e });
354
+ function v() {
355
+ let { executeCommand: e, isBold: t, isUnderline: n } = _();
356
+ return /* @__PURE__ */ c(d, {
357
+ onCommand: e,
358
+ isBold: t,
359
+ isUnderline: n
360
+ });
361
+ }
362
+ //#endregion
363
+ //#region src/components/shared/toolbar/FontName/Hooks/fontNameHandler.jsx
364
+ var y = (e, t, n) => {
365
+ let r = n || "Arial";
366
+ if (!e || !t) return;
367
+ if (!e.collapsed) {
368
+ let n = document.createElement("span");
369
+ n.style.fontFamily = r;
370
+ try {
371
+ n.appendChild(e.extractContents()), e.insertNode(n);
372
+ } catch {
373
+ document.execCommand("fontName", !1, r);
374
+ return;
375
+ }
376
+ let i = document.createRange();
377
+ i.selectNodeContents(n), t.removeAllRanges(), t.addRange(i);
378
+ return;
379
+ }
380
+ let i = document.createElement("span");
381
+ i.style.fontFamily = r;
382
+ let a = document.createTextNode("​");
383
+ i.appendChild(a), e.insertNode(i);
384
+ let o = document.createRange();
385
+ o.setStart(i.firstChild, 1), o.collapse(!0), t.removeAllRanges(), t.addRange(o);
386
+ }, ee = (e) => {
387
+ let t = window.getSelection();
388
+ if (!t || t.rangeCount === 0) return null;
389
+ let n = t.anchorNode;
390
+ if (!n || e && !e.contains(n)) return null;
391
+ for (n.nodeType === 3 && (n = n.parentNode); n && n !== e;) {
392
+ if (n.style && n.style.fontFamily) {
393
+ let e = n.style.fontFamily.split(",")[0].replace(/['"]/g, "").trim();
394
+ if (e) return e;
395
+ }
396
+ n = n.parentNode;
397
+ }
398
+ let r = window.getComputedStyle(e).fontFamily;
399
+ return r ? r.split(",")[0].replace(/['"]/g, "").trim() : null;
400
+ };
401
+ //#endregion
402
+ //#region src/components/shared/toolbar/FontName/Hooks/fontNameLogic.jsx
403
+ function b(e) {
404
+ let [t, a] = i("Arial"), o = r("Arial"), s = r(null), c = () => {
405
+ let t = window.getSelection();
406
+ if (t && t.rangeCount > 0) {
407
+ let n = t.getRangeAt(0), r = e?.current;
408
+ r && r.contains(n.commonAncestorContainer) && (s.current = n.cloneRange());
409
+ }
410
+ }, l = () => {
411
+ let t = e?.current;
412
+ if (!t) return;
413
+ let n = ee(t);
414
+ n && (a(n), o.current = n);
415
+ };
416
+ return n(() => {
417
+ let t = () => {
418
+ c(), l();
419
+ };
420
+ document.addEventListener("selectionchange", t);
421
+ let n = e?.current;
422
+ if (!n) return () => {
423
+ document.removeEventListener("selectionchange", t);
424
+ };
425
+ let r = (e) => {
426
+ if (e.inputType !== "insertText" || !e.data) return;
427
+ let t = window.getSelection();
428
+ if (!t || t.rangeCount === 0) return;
429
+ let n = t.getRangeAt(0), r = n.startContainer;
430
+ if (r.nodeType === 3 && (r = r.parentNode), r && r.tagName === "SPAN" && r.style.fontFamily && r.style.fontFamily.replace(/['"]/g, "").toLowerCase() === o.current.toLowerCase()) return;
431
+ e.preventDefault();
432
+ let i = document.createElement("span");
433
+ i.style.fontFamily = o.current, i.textContent = e.data, n.deleteContents(), n.insertNode(i);
434
+ let a = document.createRange();
435
+ a.setStart(i.firstChild, i.textContent.length), a.collapse(!0), t.removeAllRanges(), t.addRange(a);
436
+ };
437
+ return n.addEventListener("beforeinput", r), () => {
438
+ document.removeEventListener("selectionchange", t), n.removeEventListener("beforeinput", r);
439
+ };
440
+ }, [e, e?.current]), {
441
+ currentFont: t,
442
+ applyFont: (t) => {
443
+ let n = t || "Arial";
444
+ o.current = n, a(n);
445
+ let r = e?.current;
446
+ if (!r) return;
447
+ r.focus();
448
+ let i = window.getSelection(), l = null;
449
+ if (s.current ? (i.removeAllRanges(), i.addRange(s.current), l = s.current) : i.rangeCount > 0 && (l = i.getRangeAt(0)), !l) {
450
+ let e = document.createRange();
451
+ e.selectNodeContents(r), e.collapse(!1), i.removeAllRanges(), i.addRange(e), l = e;
452
+ }
453
+ y(l, i, n), c();
454
+ }
455
+ };
191
456
  }
192
457
  //#endregion
193
458
  //#region src/components/shared/toolbar/Hooks/dropdown.js
194
- function m(e, t) {
459
+ function x(e, t) {
195
460
  function n() {
196
461
  t.classList.remove("is-open"), e.classList.remove("is-active"), document.removeEventListener("click", r);
197
462
  }
198
463
  function r(r) {
199
- !t.contains(r.target) && r.target !== e && n();
464
+ !t.contains(r.target) && !e.contains(r.target) && n();
200
465
  }
201
466
  function i(n) {
202
467
  n.stopPropagation();
@@ -213,7 +478,7 @@ function m(e, t) {
213
478
  }
214
479
  //#endregion
215
480
  //#region src/components/shared/toolbar/FontName/Components/FontNameToolbar.jsx
216
- var h = [
481
+ var S = [
217
482
  "Arial",
218
483
  "Arial Black",
219
484
  "Comic Sans MS",
@@ -225,68 +490,83 @@ var h = [
225
490
  "Verdana",
226
491
  "Nunito Sans",
227
492
  "Segoe UI"
228
- ];
229
- function g({ logic: e }) {
230
- let { currentFont: t, applyFont: i } = e, a = r(null), o = r(null);
493
+ ], C = 32;
494
+ function w({ currentFont: e, applyFont: t }) {
495
+ let i = r(null), a = r(null);
231
496
  n(() => {
232
- if (a.current && o.current) return m(a.current, o.current);
497
+ if (i.current && a.current) return x(i.current, a.current);
233
498
  }, []);
234
- let s = (e) => {
235
- i(e), o.current && o.current.classList.remove("is-open"), a.current && a.current.classList.remove("is-active");
236
- };
499
+ let o = (e) => {
500
+ t(e), a.current && a.current.classList.remove("is-open"), i.current && i.current.classList.remove("is-active");
501
+ }, s = "pointer-events-none absolute left-1/2 top-[calc(100%+8px)] z-30 -translate-x-1/2 whitespace-nowrap rounded-md border border-[#2c2c2c] bg-[#1e1e1e] px-2.5 py-1 text-[11px] font-medium leading-none text-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100 rtl:left-1/2 rtl:-translate-x-1/2 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:border-x-[5px] before:border-b-[5px] before:border-t-0 before:border-solid before:border-x-transparent before:border-b-[#2c2c2c] after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:translate-y-[1px] after:border-x-[4px] after:border-b-[4px] after:border-t-0 after:border-solid after:border-x-transparent after:border-b-[#1e1e1e]";
237
502
  return /* @__PURE__ */ c("div", {
238
- className: "forge-toolbar-group forge-toolbar-fontname",
239
- children: [/* @__PURE__ */ c("button", {
240
- ref: a,
241
- type: "button",
242
- className: "forge-toolbar-button forge-fontname-button",
243
- "aria-label": "Font Family",
244
- children: [/* @__PURE__ */ c("span", {
245
- className: "forge-current-fontname",
246
- children: t
247
- }), /* @__PURE__ */ c("span", {
248
- className: "forge-tooltip",
249
- "data-i18n": "fontFamily",
250
- children: "Font Family"
503
+ className: "forge-toolbar-group forge-toolbar-fontname relative flex items-center",
504
+ children: [/* @__PURE__ */ c("div", {
505
+ className: "forge-color-button-group flex h-[30px] items-center overflow-visible rounded border border-[#ccc] bg-white hover:border-[#aaa] hover:bg-[#f9f9f9]",
506
+ children: [/* @__PURE__ */ c("button", {
507
+ type: "button",
508
+ className: "forge-fontname-main group relative flex h-full items-center justify-center min-w-[70px] cursor-pointer border-none bg-transparent px-2 hover:bg-black/5",
509
+ onMouseDown: (e) => e.preventDefault(),
510
+ onClick: () => {
511
+ i.current && i.current.click();
512
+ },
513
+ "aria-label": "Current font",
514
+ children: [/* @__PURE__ */ c("span", {
515
+ className: "forge-current-fontname max-w-[65px] truncate text-xs text-[#333]",
516
+ style: { fontFamily: e },
517
+ children: e
518
+ }), /* @__PURE__ */ c("span", {
519
+ className: s,
520
+ "data-i18n": "fontName",
521
+ children: "Font Family"
522
+ })]
523
+ }), /* @__PURE__ */ c("button", {
524
+ ref: i,
525
+ type: "button",
526
+ className: "forge-fontname-dropdown-btn group relative flex h-full items-center justify-center min-w-[18px] cursor-pointer border-l border-[#ccc] bg-transparent px-1 hover:bg-black/5",
527
+ onMouseDown: (e) => e.preventDefault(),
528
+ "aria-label": "More fonts",
529
+ children: [/* @__PURE__ */ c(() => /* @__PURE__ */ c("svg", {
530
+ className: "h-2 w-2 fill-current text-[#666]",
531
+ viewBox: "0 0 10 6",
532
+ xmlns: "http://www.w3.org/2000/svg",
533
+ children: /* @__PURE__ */ c("path", { d: "M0 0l5 6 5-6H0z" })
534
+ }), {}), /* @__PURE__ */ c("span", {
535
+ className: s,
536
+ "data-i18n": "moreFont",
537
+ children: "More Fonts"
538
+ })]
251
539
  })]
252
540
  }), /* @__PURE__ */ c("div", {
253
- ref: o,
254
- className: "forge-toolbar-dropdown forge-dropdown-fontname",
255
- role: "list",
256
- "aria-label": "Font Family",
257
- children: h.map((e) => /* @__PURE__ */ c("a", {
258
- className: "forge-dropdown-item",
259
- href: "#",
260
- "data-value": e,
261
- role: "listitem",
262
- style: { fontFamily: e },
263
- onClick: (t) => {
264
- t.preventDefault(), s(e);
541
+ ref: a,
542
+ className: "forge-toolbar-dropdown forge-dropdown-fontname absolute left-0 top-full z-20 hidden mt-1 min-w-[150px] overflow-y-auto rounded border border-[#ccc] bg-white p-1 shadow-md rtl:left-auto rtl:right-0 [&.is-open]:block",
543
+ style: { maxHeight: "128px" },
544
+ children: S.map((e) => /* @__PURE__ */ c("button", {
545
+ type: "button",
546
+ className: "forge-dropdown-item flex w-full cursor-pointer items-center whitespace-nowrap rounded-sm px-2 text-left text-xs text-[#333] hover:bg-[#f0f0f0]",
547
+ style: {
548
+ fontFamily: e,
549
+ height: `${C}px`
265
550
  },
551
+ onMouseDown: (e) => e.preventDefault(),
552
+ onClick: () => o(e),
266
553
  children: e
267
554
  }, e))
268
555
  })]
269
556
  });
270
557
  }
271
558
  //#endregion
272
- //#region src/components/shared/toolbar/FontName/Hooks/fontNameLogic.jsx
273
- function _() {
274
- let [e, t] = i("Nunito Sans");
275
- return {
276
- currentFont: e,
277
- applyFont: (e) => {
278
- document.execCommand("fontName", !1, e), t(e);
279
- }
280
- };
281
- }
282
- //#endregion
283
559
  //#region src/components/shared/toolbar/FontName/Components/index.jsx
284
- function v() {
285
- return /* @__PURE__ */ c(g, { logic: _() });
560
+ function T({ editorRef: e }) {
561
+ let { currentFont: t, applyFont: n } = b(e);
562
+ return /* @__PURE__ */ c(w, {
563
+ currentFont: t,
564
+ applyFont: n
565
+ });
286
566
  }
287
567
  //#endregion
288
568
  //#region src/components/shared/toolbar/Color/Components/colorPalette.jsx
289
- var y = [
569
+ var E = [
290
570
  [
291
571
  "#000000",
292
572
  "#424242",
@@ -368,151 +648,163 @@ var y = [
368
648
  "#4A1031"
369
649
  ]
370
650
  ];
371
- function b({ event: e, onApply: t }) {
651
+ function D({ event: e, onApply: t, currentColor: n }) {
372
652
  return /* @__PURE__ */ c("div", {
373
- className: "forge-color-palette",
374
- children: y.map((n, r) => /* @__PURE__ */ c("div", {
375
- className: "forge-color-row",
376
- children: n.map((n) => /* @__PURE__ */ c("button", {
377
- type: "button",
378
- className: "forge-color-button",
379
- style: { backgroundColor: n },
380
- onMouseDown: (e) => e.preventDefault(),
381
- onClick: () => t(e, n),
382
- "aria-label": n
383
- }, n))
384
- }, r))
653
+ className: "forge-color-palette flex flex-col gap-1",
654
+ children: E.map((r, i) => /* @__PURE__ */ c("div", {
655
+ className: "forge-color-row flex gap-1 justify-between",
656
+ children: r.map((r) => {
657
+ let i = n?.toLowerCase() === r.toLowerCase();
658
+ return /* @__PURE__ */ c("button", {
659
+ type: "button",
660
+ title: r,
661
+ className: `forge-color-button h-4 w-4 cursor-pointer rounded-[2px] border p-0 hover:scale-110 hover:border-black transition-transform ${i ? "border-2 border-black" : "border-[#ccc]"}`,
662
+ style: { backgroundColor: r },
663
+ onMouseDown: (e) => e.preventDefault(),
664
+ onClick: () => t(e, r),
665
+ "aria-label": r,
666
+ "aria-pressed": i
667
+ }, r);
668
+ })
669
+ }, i))
385
670
  });
386
671
  }
387
672
  //#endregion
388
673
  //#region src/components/shared/toolbar/Color/Components/ColorToolbar.jsx
389
- function x({ logic: e }) {
674
+ function te({ logic: e }) {
390
675
  let { applyColor: t, applyRecentColor: i, resetColor: a, recentForeColor: o, recentBackColor: s } = e, l = r(null), u = r(null), d = r(null), f = r(null);
391
- return n(() => {
392
- if (l.current && u.current) return m(l.current, u.current);
676
+ n(() => {
677
+ if (l.current && u.current) return x(l.current, u.current);
393
678
  }, []), n(() => {
394
- if (d.current && f.current) return m(d.current, f.current);
395
- }, []), /* @__PURE__ */ c("div", {
396
- className: "forge-toolbar-group forge-toolbar-color",
679
+ if (d.current && f.current) return x(d.current, f.current);
680
+ }, []);
681
+ let p = (e, n) => {
682
+ t(e, n), u.current && u.current.classList.remove("is-open"), l.current && l.current.classList.remove("is-active");
683
+ }, m = (e, n) => {
684
+ t(e, n), f.current && f.current.classList.remove("is-open"), d.current && d.current.classList.remove("is-active");
685
+ }, h = () => {
686
+ a("foreColor"), u.current && u.current.classList.remove("is-open"), l.current && l.current.classList.remove("is-active");
687
+ }, g = () => {
688
+ a("backColor"), f.current && f.current.classList.remove("is-open"), d.current && d.current.classList.remove("is-active");
689
+ }, _ = "pointer-events-none absolute left-1/2 top-[calc(100%+8px)] z-30 -translate-x-1/2 whitespace-nowrap rounded-md border border-[#2c2c2c] bg-[#1e1e1e] px-2.5 py-1 text-[11px] font-medium leading-none text-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100 group-has-[.is-open]:hidden rtl:left-1/2 rtl:-translate-x-1/2 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:border-x-[5px] before:border-b-[5px] before:border-t-0 before:border-solid before:border-x-transparent before:border-b-[#2c2c2c] after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:translate-y-[1px] after:border-x-[4px] after:border-b-[4px] after:border-t-0 after:border-solid after:border-x-transparent after:border-b-[#1e1e1e]", v = () => /* @__PURE__ */ c("svg", {
690
+ className: "h-2 w-2 fill-current text-[#666]",
691
+ viewBox: "0 0 10 6",
692
+ xmlns: "http://www.w3.org/2000/svg",
693
+ children: /* @__PURE__ */ c("path", { d: "M0 0l5 6 5-6H0z" })
694
+ });
695
+ return /* @__PURE__ */ c("div", {
696
+ className: "forge-toolbar-group forge-toolbar-color flex items-center gap-1",
397
697
  children: [/* @__PURE__ */ c("div", {
398
- className: "forge-color-item",
698
+ className: "forge-color-item relative flex items-center",
399
699
  children: [/* @__PURE__ */ c("div", {
400
- className: "forge-color-button-group",
700
+ className: "forge-color-button-group flex h-[30px] items-center overflow-visible rounded border border-[#ccc] bg-white hover:border-[#aaa] hover:bg-[#f9f9f9]",
401
701
  children: [/* @__PURE__ */ c("button", {
402
702
  type: "button",
403
- className: "forge-color-main forge-toolbar-button",
703
+ className: "forge-color-main group relative flex h-full items-center justify-center min-w-[28px] cursor-pointer border-none bg-transparent p-0 hover:bg-black/5",
404
704
  onMouseDown: (e) => e.preventDefault(),
405
705
  onClick: () => i("foreColor"),
406
706
  "aria-label": "Apply text color",
407
707
  children: [/* @__PURE__ */ c("span", {
408
- className: "forge-recent-color",
708
+ className: "forge-recent-color flex h-5 w-5 items-center justify-center rounded-[2px] border border-[#ccc] text-xs font-bold",
409
709
  style: {
410
710
  backgroundColor: "transparent",
411
711
  color: o
412
712
  },
413
713
  children: "A"
414
714
  }), /* @__PURE__ */ c("span", {
415
- className: "forge-tooltip",
715
+ className: _,
416
716
  "data-i18n": "recentColor",
417
717
  children: "Recent Color"
418
718
  })]
419
719
  }), /* @__PURE__ */ c("button", {
420
720
  ref: l,
421
721
  type: "button",
422
- className: "forge-color-dropdown-btn forge-toolbar-button",
722
+ className: "forge-color-dropdown-btn group relative flex h-full items-center justify-center min-w-[18px] cursor-pointer border-l border-[#ccc] bg-transparent px-1 hover:bg-black/5",
423
723
  onMouseDown: (e) => e.preventDefault(),
424
724
  "aria-label": "More text colors",
425
- children: ["▼", /* @__PURE__ */ c("span", {
426
- className: "forge-tooltip",
725
+ children: [/* @__PURE__ */ c(v, {}), /* @__PURE__ */ c("span", {
726
+ className: _,
427
727
  "data-i18n": "moreColor",
428
728
  children: "More Color"
429
729
  })]
430
730
  })]
431
731
  }), /* @__PURE__ */ c("div", {
432
732
  ref: u,
433
- className: "forge-toolbar-dropdown forge-dropdown-color",
733
+ className: "forge-toolbar-dropdown forge-dropdown-color absolute left-0 top-full z-20 hidden mt-1 max-h-[220px] min-w-[180px] overflow-y-auto rounded border border-[#ccc] bg-white p-2 shadow-md rtl:left-auto rtl:right-0 [&.is-open]:block",
434
734
  children: /* @__PURE__ */ c("div", {
435
735
  className: "forge-color-section",
436
736
  children: [/* @__PURE__ */ c("div", {
437
- className: "forge-color-section-header",
737
+ className: "forge-color-section-header mb-1.5 flex items-center justify-between",
438
738
  children: [/* @__PURE__ */ c("span", {
439
- className: "forge-color-title",
739
+ className: "forge-color-title text-xs font-bold text-[#333]",
440
740
  children: "Text Color"
441
741
  }), /* @__PURE__ */ c("button", {
442
742
  type: "button",
443
- className: "forge-color-reset",
743
+ className: "forge-color-reset cursor-pointer rounded border border-[#ccc] bg-[#f5f5f5] px-2 py-0.5 text-[11px] font-medium text-[#333] hover:border-[#999] hover:bg-[#e6e6e6]",
444
744
  onMouseDown: (e) => e.preventDefault(),
445
- onClick: () => {
446
- a("foreColor"), u.current && u.current.classList.remove("is-open"), l.current && l.current.classList.remove("is-active");
447
- },
745
+ onClick: h,
448
746
  children: "Reset"
449
747
  })]
450
- }), /* @__PURE__ */ c(b, {
748
+ }), /* @__PURE__ */ c(D, {
451
749
  event: "foreColor",
452
- onApply: (e, n) => {
453
- t(e, n), u.current && u.current.classList.remove("is-open"), l.current && l.current.classList.remove("is-active");
454
- }
750
+ onApply: p
455
751
  })]
456
752
  })
457
753
  })]
458
754
  }), /* @__PURE__ */ c("div", {
459
- className: "forge-color-item",
755
+ className: "forge-color-item relative flex items-center",
460
756
  children: [/* @__PURE__ */ c("div", {
461
- className: "forge-color-button-group",
757
+ className: "forge-color-button-group flex h-[30px] items-center overflow-visible rounded border border-[#ccc] bg-white hover:border-[#aaa] hover:bg-[#f9f9f9]",
462
758
  children: [/* @__PURE__ */ c("button", {
463
759
  type: "button",
464
- className: "forge-color-main forge-toolbar-button",
760
+ className: "forge-color-main group relative flex h-full items-center justify-center min-w-[28px] cursor-pointer border-none bg-transparent p-0 hover:bg-black/5",
465
761
  onMouseDown: (e) => e.preventDefault(),
466
762
  onClick: () => i("backColor"),
467
763
  "aria-label": "Apply background color",
468
764
  children: [/* @__PURE__ */ c("span", {
469
- className: "forge-recent-color",
765
+ className: "forge-recent-color flex h-5 w-5 items-center justify-center rounded-[2px] border border-[#ccc] text-xs font-bold",
470
766
  style: {
471
- backgroundColor: s,
767
+ backgroundColor: s || "#FFFFFF",
472
768
  color: "#000"
473
769
  },
474
770
  children: "A"
475
771
  }), /* @__PURE__ */ c("span", {
476
- className: "forge-tooltip",
772
+ className: _,
477
773
  "data-i18n": "recentBackColor",
478
774
  children: "Recent Background Color"
479
775
  })]
480
776
  }), /* @__PURE__ */ c("button", {
481
777
  ref: d,
482
778
  type: "button",
483
- className: "forge-color-dropdown-btn forge-toolbar-button",
779
+ className: "forge-color-dropdown-btn group relative flex h-full items-center justify-center min-w-[18px] cursor-pointer border-l border-[#ccc] bg-transparent px-1 hover:bg-black/5",
484
780
  onMouseDown: (e) => e.preventDefault(),
485
781
  "aria-label": "More background colors",
486
- children: ["▼", /* @__PURE__ */ c("span", {
487
- className: "forge-tooltip",
782
+ children: [/* @__PURE__ */ c(v, {}), /* @__PURE__ */ c("span", {
783
+ className: _,
488
784
  "data-i18n": "moreBackColor",
489
785
  children: "More Background Colors"
490
786
  })]
491
787
  })]
492
788
  }), /* @__PURE__ */ c("div", {
493
789
  ref: f,
494
- className: "forge-toolbar-dropdown forge-dropdown-color",
790
+ className: "forge-toolbar-dropdown forge-dropdown-color absolute left-0 top-full z-20 hidden mt-1 max-h-[220px] min-w-[180px] overflow-y-auto rounded border border-[#ccc] bg-white p-2 shadow-md rtl:left-auto rtl:right-0 [&.is-open]:block",
495
791
  children: /* @__PURE__ */ c("div", {
496
792
  className: "forge-color-section",
497
793
  children: [/* @__PURE__ */ c("div", {
498
- className: "forge-color-section-header",
794
+ className: "forge-color-section-header mb-1.5 flex items-center justify-between",
499
795
  children: [/* @__PURE__ */ c("span", {
500
- className: "forge-color-title",
796
+ className: "forge-color-title text-xs font-bold text-[#333]",
501
797
  children: "Background Color"
502
798
  }), /* @__PURE__ */ c("button", {
503
799
  type: "button",
504
- className: "forge-color-reset",
800
+ className: "forge-color-reset cursor-pointer rounded border border-[#ccc] bg-[#f5f5f5] px-2 py-0.5 text-[11px] font-medium text-[#333] hover:border-[#999] hover:bg-[#e6e6e6]",
505
801
  onMouseDown: (e) => e.preventDefault(),
506
- onClick: () => {
507
- a("backColor"), f.current && f.current.classList.remove("is-open"), d.current && d.current.classList.remove("is-active");
508
- },
509
- children: "Transparent"
802
+ onClick: g,
803
+ children: "White"
510
804
  })]
511
- }), /* @__PURE__ */ c(b, {
805
+ }), /* @__PURE__ */ c(D, {
512
806
  event: "backColor",
513
- onApply: (e, n) => {
514
- t(e, n), f.current && f.current.classList.remove("is-open"), d.current && d.current.classList.remove("is-active");
515
- }
807
+ onApply: m
516
808
  })]
517
809
  })
518
810
  })]
@@ -521,23 +813,23 @@ function x({ logic: e }) {
521
813
  }
522
814
  //#endregion
523
815
  //#region src/components/shared/toolbar/Color/Hooks/colorUtils.jsx
524
- function S(e) {
816
+ function O(e) {
525
817
  let t = document.createElement("span");
526
818
  t.style.color = e, document.body.appendChild(t);
527
819
  let n = window.getComputedStyle(t).color;
528
820
  return document.body.removeChild(t), n;
529
821
  }
530
- function C(e, t) {
822
+ function ne(e, t) {
531
823
  let n = e;
532
824
  for (; n && n !== document.body;) {
533
- if (n.nodeType === Node.ELEMENT_NODE && n.tagName === "SPAN" && n.style.color && S(n.style.color) === t) return n;
825
+ if (n.nodeType === Node.ELEMENT_NODE && n.tagName === "SPAN" && n.style.color && O(n.style.color) === t) return n;
534
826
  n = n.parentElement;
535
827
  }
536
828
  return null;
537
829
  }
538
830
  //#endregion
539
831
  //#region src/components/shared/toolbar/Color/Hooks/usePenMode.jsx
540
- function w(e, t) {
832
+ function re(e, t) {
541
833
  n(() => {
542
834
  function n(n) {
543
835
  if (n.inputType !== "insertText" || !n.data || !e.current) return;
@@ -547,9 +839,9 @@ function w(e, t) {
547
839
  if (!i || !i.rangeCount) return;
548
840
  let a = i.getRangeAt(0);
549
841
  if (!a.collapsed) return;
550
- let o = S(e.current), s = a.startContainer;
842
+ let o = O(e.current), s = a.startContainer;
551
843
  s.nodeType === Node.TEXT_NODE && (s = s.parentElement);
552
- let c = C(s, o);
844
+ let c = ne(s, o);
553
845
  if (n.preventDefault(), c) {
554
846
  let e = document.createTextNode(n.data);
555
847
  a.insertNode(e), a.setStartAfter(e), a.collapse(!0), i.removeAllRanges(), i.addRange(a);
@@ -564,13 +856,30 @@ function w(e, t) {
564
856
  }, []);
565
857
  }
566
858
  //#endregion
859
+ //#region src/components/shared/toolbar/Color/Hooks/foreColorHandler.jsx
860
+ var ie = (e, t, n) => {
861
+ let r = n || "#000000";
862
+ if (!e) return;
863
+ if (!e.collapsed) {
864
+ let n = e.extractContents(), i = document.createElement("span");
865
+ i.style.color = r, i.appendChild(n), e.insertNode(i);
866
+ let a = document.createRange();
867
+ a.selectNodeContents(i), t.removeAllRanges(), t.addRange(a);
868
+ return;
869
+ }
870
+ let i = document.createElement("span");
871
+ i.style.color = r, i.appendChild(document.createTextNode("​")), e.insertNode(i);
872
+ let a = document.createRange();
873
+ a.setStart(i.firstChild, 1), a.collapse(!0), t.removeAllRanges(), t.addRange(a);
874
+ };
875
+ //#endregion
567
876
  //#region src/components/shared/toolbar/Color/Hooks/useForeColor.jsx
568
- function T(e = "forge-editor__content") {
877
+ function ae(e = "forge-editor__content") {
569
878
  let [t, n] = i("#000000"), a = r(null);
570
- w(a, e);
879
+ re(a, e);
571
880
  let o = (e) => {
572
- let t = window.getSelection();
573
- t && t.rangeCount && !t.getRangeAt(0).collapsed && (document.execCommand("styleWithCSS", !1, !0), document.execCommand("foreColor", !1, e)), a.current = e, n(e);
881
+ let t = e || "#000000", r = window.getSelection();
882
+ r && r.rangeCount > 0 && ie(r.getRangeAt(0), r, t), a.current = t, n(t);
574
883
  };
575
884
  return {
576
885
  recentForeColor: t,
@@ -579,31 +888,72 @@ function T(e = "forge-editor__content") {
579
888
  o(t);
580
889
  },
581
890
  resetForeColor: () => {
582
- document.execCommand("styleWithCSS", !1, !0), document.execCommand("removeFormat", !1, null), a.current = null, n("#000000");
891
+ o("#000000"), a.current = null;
583
892
  }
584
893
  };
585
894
  }
586
895
  //#endregion
896
+ //#region src/components/shared/toolbar/Color/Hooks/usePenModeBack.jsx
897
+ function k(e, t) {
898
+ n(() => {
899
+ let n = (n) => {
900
+ if (!e.current || n.inputType !== "insertText" || !n.data) return;
901
+ let r = window.getSelection();
902
+ if (!r || !r.rangeCount) return;
903
+ let i = r.getRangeAt(0);
904
+ if (!(i.startContainer.nodeType === 1 ? i.startContainer.closest(`.${t}`) : i.startContainer.parentElement?.closest(`.${t}`))) return;
905
+ n.preventDefault();
906
+ let a = document.createElement("span");
907
+ a.style.backgroundColor = e.current, a.textContent = n.data, i.deleteContents(), i.insertNode(a);
908
+ let o = document.createRange();
909
+ o.setStartAfter(a), o.collapse(!0), r.removeAllRanges(), r.addRange(o);
910
+ };
911
+ return document.addEventListener("beforeinput", n, !0), () => {
912
+ document.removeEventListener("beforeinput", n, !0);
913
+ };
914
+ }, [t, e]);
915
+ }
916
+ //#endregion
917
+ //#region src/components/shared/toolbar/Color/Hooks/backColorHandler.jsx
918
+ var A = (e, t, n) => {
919
+ let r = n || "#FFFFFF";
920
+ if (!e) return;
921
+ if (!e.collapsed) {
922
+ let n = e.extractContents(), i = document.createElement("span");
923
+ i.style.backgroundColor = r, i.appendChild(n), e.insertNode(i);
924
+ let a = document.createRange();
925
+ a.selectNodeContents(i), t.removeAllRanges(), t.addRange(a);
926
+ return;
927
+ }
928
+ let i = document.createElement("span");
929
+ i.style.backgroundColor = r, i.appendChild(document.createTextNode("​")), e.insertNode(i);
930
+ let a = document.createRange();
931
+ a.setStart(i.firstChild, 1), a.collapse(!0), t.removeAllRanges(), t.addRange(a);
932
+ };
933
+ //#endregion
587
934
  //#region src/components/shared/toolbar/Color/Hooks/useBackColor.jsx
588
- function E() {
589
- let [e, t] = i("#FFFF00");
935
+ function oe(e = "forge-editor__content") {
936
+ let [t, n] = i("#FFFFFF"), a = r(null);
937
+ k(a, e);
938
+ let o = (e) => {
939
+ let t = e || "#FFFFFF", r = window.getSelection();
940
+ r && r.rangeCount > 0 && A(r.getRangeAt(0), r, t), a.current = t, n(t);
941
+ };
590
942
  return {
591
- recentBackColor: e,
592
- applyBackColor: (e) => {
593
- document.execCommand("styleWithCSS", !1, !0), document.execCommand("backColor", !1, e), t(e);
594
- },
943
+ recentBackColor: t,
944
+ applyBackColor: o,
595
945
  applyRecentBackColor: () => {
596
- document.execCommand("styleWithCSS", !1, !0), document.execCommand("backColor", !1, e);
946
+ o(t);
597
947
  },
598
948
  resetBackColor: () => {
599
- document.execCommand("styleWithCSS", !1, !0), document.execCommand("backColor", !1, "transparent"), t("transparent");
949
+ o("#FFFFFF"), a.current = null;
600
950
  }
601
951
  };
602
952
  }
603
953
  //#endregion
604
954
  //#region src/components/shared/toolbar/Color/Hooks/colorLogic.jsx
605
- function D() {
606
- let e = T(), t = E();
955
+ function se() {
956
+ let e = ae(), t = oe();
607
957
  return {
608
958
  applyColor: (n, r) => {
609
959
  n === "foreColor" ? e.applyForeColor(r) : n === "backColor" && t.applyBackColor(r);
@@ -620,369 +970,421 @@ function D() {
620
970
  }
621
971
  //#endregion
622
972
  //#region src/components/shared/toolbar/Color/Components/index.jsx
623
- function O() {
624
- return console.log("[CreateColorToolbar] Rendering ColorToolbar"), /* @__PURE__ */ c(x, { logic: D() });
973
+ function ce() {
974
+ return /* @__PURE__ */ c(te, { logic: se() });
625
975
  }
626
976
  //#endregion
627
977
  //#region src/components/shared/toolbar/Paragraph/Components/ParagraphToolbar.jsx
628
- function ee({ logic: e }) {
629
- let { execCommand: t } = e, i = r(null), a = r(null);
630
- return n(() => {
631
- if (i.current && a.current) return m(i.current, a.current);
632
- }, []), /* @__PURE__ */ c("div", {
633
- className: "forge-toolbar-group forge-toolbar-paragraph",
978
+ function le({ logic: e = {} }) {
979
+ let { saveSelectionRange: t, toggleUnorderedList: a, toggleOrderedList: o, setAlignment: s, outdent: l, indent: u } = e, [d, f] = i(!1), p = r(null);
980
+ n(() => {
981
+ let e = (e) => {
982
+ p.current && !p.current.contains(e.target) && f(!1);
983
+ };
984
+ return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
985
+ }, []);
986
+ let m = (e, n, r = null) => {
987
+ e.preventDefault(), typeof t == "function" && t(), typeof n == "function" && n(r);
988
+ }, h = "forge-toolbar-button group relative flex h-8 items-center justify-center bg-white px-2.5 text-sm transition-all duration-150 hover:bg-[#f5f5f5] active:bg-[#e8e8e8] focus:outline-none", g = "forge-toolbar-icon inline-block h-4 w-4", _ = "pointer-events-none absolute left-1/2 top-[calc(100%+8px)] z-30 -translate-x-1/2 whitespace-nowrap rounded-md border border-[#2c2c2c] bg-[#1e1e1e] px-2.5 py-1 text-[11px] font-medium leading-none text-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100 rtl:left-1/2 rtl:-translate-x-1/2 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:border-x-[5px] before:border-b-[5px] before:border-t-0 before:border-solid before:border-x-transparent before:border-b-[#2c2c2c] after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:translate-y-[1px] after:border-x-[4px] after:border-b-[4px] after:border-t-0 after:border-solid after:border-x-transparent after:border-b-[#1e1e1e]", v = "group relative flex h-7 w-7 items-center justify-center rounded hover:bg-gray-100";
989
+ return /* @__PURE__ */ c("div", {
990
+ ref: p,
991
+ className: "forge-toolbar-group forge-toolbar-paragraph relative inline-flex items-center text-black",
634
992
  children: [
635
- /* @__PURE__ */ c("button", {
636
- type: "button",
637
- className: "forge-toolbar-button",
638
- onClick: () => t("insertUnorderedList"),
639
- "aria-label": "Unordered list",
640
- children: [/* @__PURE__ */ c("span", {
641
- className: "forge-toolbar-icon",
642
- children: /* @__PURE__ */ c("svg", {
643
- viewBox: "0 0 20 20",
644
- width: "16",
645
- height: "16",
646
- children: [
647
- /* @__PURE__ */ c("circle", {
648
- cx: "2.5",
649
- cy: "4",
650
- r: "1.5"
651
- }),
652
- /* @__PURE__ */ c("circle", {
653
- cx: "2.5",
654
- cy: "10",
655
- r: "1.5"
656
- }),
657
- /* @__PURE__ */ c("circle", {
658
- cx: "2.5",
659
- cy: "16",
660
- r: "1.5"
661
- }),
662
- /* @__PURE__ */ c("rect", {
663
- x: "7",
664
- y: "3",
665
- width: "12",
666
- height: "2",
667
- rx: "1"
668
- }),
669
- /* @__PURE__ */ c("rect", {
670
- x: "7",
671
- y: "9",
672
- width: "12",
673
- height: "2",
674
- rx: "1"
675
- }),
676
- /* @__PURE__ */ c("rect", {
677
- x: "7",
678
- y: "15",
679
- width: "12",
680
- height: "2",
681
- rx: "1"
993
+ /* @__PURE__ */ c("style", { children: "\n .forge-toolbar-paragraph svg * {\n vector-effect: non-scaling-stroke;\n }\n " }),
994
+ /* @__PURE__ */ c("div", {
995
+ className: "inline-flex rounded-md border border-[#d1d5db] bg-white shadow-sm -space-x-px",
996
+ children: [
997
+ /* @__PURE__ */ c("button", {
998
+ type: "button",
999
+ className: h,
1000
+ onMouseDown: (e) => m(e, a),
1001
+ "aria-label": "Unordered list",
1002
+ children: [/* @__PURE__ */ c("span", {
1003
+ className: g,
1004
+ children: /* @__PURE__ */ c("svg", {
1005
+ viewBox: "0 0 20 20",
1006
+ className: "block h-4 w-4",
1007
+ children: [
1008
+ /* @__PURE__ */ c("circle", {
1009
+ cx: "3",
1010
+ cy: "5",
1011
+ r: "1.5",
1012
+ fill: "black"
1013
+ }),
1014
+ /* @__PURE__ */ c("circle", {
1015
+ cx: "3",
1016
+ cy: "10",
1017
+ r: "1.5",
1018
+ fill: "black"
1019
+ }),
1020
+ /* @__PURE__ */ c("circle", {
1021
+ cx: "3",
1022
+ cy: "15",
1023
+ r: "1.5",
1024
+ fill: "black"
1025
+ }),
1026
+ /* @__PURE__ */ c("rect", {
1027
+ x: "7",
1028
+ y: "4",
1029
+ width: "11",
1030
+ height: "2",
1031
+ rx: "1",
1032
+ fill: "black"
1033
+ }),
1034
+ /* @__PURE__ */ c("rect", {
1035
+ x: "7",
1036
+ y: "9",
1037
+ width: "11",
1038
+ height: "2",
1039
+ rx: "1",
1040
+ fill: "black"
1041
+ }),
1042
+ /* @__PURE__ */ c("rect", {
1043
+ x: "7",
1044
+ y: "14",
1045
+ width: "11",
1046
+ height: "2",
1047
+ rx: "1",
1048
+ fill: "black"
1049
+ })
1050
+ ]
682
1051
  })
683
- ]
684
- })
685
- }), /* @__PURE__ */ c("span", {
686
- className: "forge-tooltip",
687
- "data-i18n": "unorderedList",
688
- children: "Bullet list"
689
- })]
690
- }),
691
- /* @__PURE__ */ c("button", {
692
- type: "button",
693
- className: "forge-toolbar-button",
694
- onClick: () => t("insertOrderedList"),
695
- "aria-label": "Ordered list",
696
- children: [/* @__PURE__ */ c("span", {
697
- className: "forge-toolbar-icon",
698
- children: /* @__PURE__ */ c("svg", {
699
- viewBox: "0 0 20 20",
700
- width: "16",
701
- height: "16",
702
- children: [
703
- /* @__PURE__ */ c("rect", {
704
- x: "7",
705
- y: "3",
706
- width: "12",
707
- height: "2",
708
- rx: "1"
709
- }),
710
- /* @__PURE__ */ c("rect", {
711
- x: "7",
712
- y: "9",
713
- width: "12",
714
- height: "2",
715
- rx: "1"
716
- }),
717
- /* @__PURE__ */ c("rect", {
718
- x: "7",
719
- y: "15",
720
- width: "12",
721
- height: "2",
722
- rx: "1"
723
- }),
724
- /* @__PURE__ */ c("path", {
725
- d: "M 1.5 4.5 L 3.5 3 L 3.5 10 M 2 10 L 5 10",
726
- fill: "none",
727
- stroke: "#000",
728
- strokeWidth: "1.8",
729
- strokeLinecap: "round",
730
- strokeLinejoin: "round"
731
- }),
732
- /* @__PURE__ */ c("path", {
733
- d: "M 1.5 14 C 1.5 12.8 4.5 12.8 4.5 14.5 C 4.5 16 1.5 16.5 1.5 18 L 5 18",
734
- fill: "none",
735
- stroke: "#000",
736
- strokeWidth: "1.8",
737
- strokeLinecap: "round",
738
- strokeLinejoin: "round"
1052
+ }), /* @__PURE__ */ c("span", {
1053
+ className: _,
1054
+ "data-i18n": "unorderedList",
1055
+ children: "Bullet list"
1056
+ })]
1057
+ }),
1058
+ /* @__PURE__ */ c("div", { className: "w-[1px] bg-[#e5e7eb] my-1" }),
1059
+ /* @__PURE__ */ c("button", {
1060
+ type: "button",
1061
+ className: h,
1062
+ onMouseDown: (e) => m(e, o),
1063
+ "aria-label": "Ordered list",
1064
+ children: [/* @__PURE__ */ c("span", {
1065
+ className: g,
1066
+ children: /* @__PURE__ */ c("svg", {
1067
+ viewBox: "0 0 20 20",
1068
+ className: "block h-4 w-4",
1069
+ children: [
1070
+ /* @__PURE__ */ c("rect", {
1071
+ x: "7",
1072
+ y: "4",
1073
+ width: "11",
1074
+ height: "2",
1075
+ rx: "1",
1076
+ fill: "black"
1077
+ }),
1078
+ /* @__PURE__ */ c("rect", {
1079
+ x: "7",
1080
+ y: "9",
1081
+ width: "11",
1082
+ height: "2",
1083
+ rx: "1",
1084
+ fill: "black"
1085
+ }),
1086
+ /* @__PURE__ */ c("rect", {
1087
+ x: "7",
1088
+ y: "14",
1089
+ width: "11",
1090
+ height: "2",
1091
+ rx: "1",
1092
+ fill: "black"
1093
+ }),
1094
+ /* @__PURE__ */ c("path", {
1095
+ d: "M 1.5 4.5 L 3.5 3 L 3.5 10 M 2 10 L 5 10",
1096
+ fill: "none",
1097
+ stroke: "black",
1098
+ strokeWidth: "1.6",
1099
+ strokeLinecap: "round",
1100
+ strokeLinejoin: "round"
1101
+ }),
1102
+ /* @__PURE__ */ c("path", {
1103
+ d: "M 1.5 14 C 1.5 12.8 4.5 12.8 4.5 14.5 C 4.5 16 1.5 16.5 1.5 18 L 5 18",
1104
+ fill: "none",
1105
+ stroke: "black",
1106
+ strokeWidth: "1.6",
1107
+ strokeLinecap: "round",
1108
+ strokeLinejoin: "round"
1109
+ })
1110
+ ]
739
1111
  })
740
- ]
741
- })
742
- }), /* @__PURE__ */ c("span", {
743
- className: "forge-tooltip",
744
- "data-i18n": "orderedList",
745
- children: "Numbered list"
746
- })]
747
- }),
748
- /* @__PURE__ */ c("button", {
749
- ref: i,
750
- type: "button",
751
- className: "forge-toolbar-button",
752
- "aria-label": "Paragraph",
753
- children: [/* @__PURE__ */ c("span", {
754
- className: "forge-toolbar-icon",
755
- children: /* @__PURE__ */ c("svg", {
756
- viewBox: "0 0 20 20",
757
- width: "16",
758
- height: "16",
1112
+ }), /* @__PURE__ */ c("span", {
1113
+ className: _,
1114
+ "data-i18n": "orderedList",
1115
+ children: "Numbered list"
1116
+ })]
1117
+ }),
1118
+ /* @__PURE__ */ c("div", { className: "w-[1px] bg-[#e5e7eb] my-1" }),
1119
+ /* @__PURE__ */ c("button", {
1120
+ type: "button",
1121
+ className: `${h} gap-1 pr-1.5`,
1122
+ onMouseDown: (e) => {
1123
+ e.preventDefault(), typeof t == "function" && t();
1124
+ },
1125
+ onClick: () => f(!d),
1126
+ "aria-label": "Paragraph",
759
1127
  children: [
760
- /* @__PURE__ */ c("rect", {
761
- x: "1",
762
- y: "3",
763
- width: "18",
764
- height: "2",
765
- rx: "1"
1128
+ /* @__PURE__ */ c("span", {
1129
+ className: g,
1130
+ children: /* @__PURE__ */ c("svg", {
1131
+ viewBox: "0 0 20 20",
1132
+ className: "block h-4 w-4",
1133
+ children: [
1134
+ /* @__PURE__ */ c("rect", {
1135
+ x: "1",
1136
+ y: "4",
1137
+ width: "18",
1138
+ height: "2",
1139
+ rx: "1",
1140
+ fill: "black"
1141
+ }),
1142
+ /* @__PURE__ */ c("rect", {
1143
+ x: "1",
1144
+ y: "9",
1145
+ width: "18",
1146
+ height: "2",
1147
+ rx: "1",
1148
+ fill: "black"
1149
+ }),
1150
+ /* @__PURE__ */ c("rect", {
1151
+ x: "1",
1152
+ y: "14",
1153
+ width: "12",
1154
+ height: "2",
1155
+ rx: "1",
1156
+ fill: "black"
1157
+ })
1158
+ ]
1159
+ })
766
1160
  }),
767
- /* @__PURE__ */ c("rect", {
768
- x: "1",
769
- y: "9",
770
- width: "18",
771
- height: "2",
772
- rx: "1"
1161
+ /* @__PURE__ */ c("svg", {
1162
+ className: `h-2.5 w-2.5 fill-current text-gray-700 transition-transform ${d ? "rotate-180" : ""}`,
1163
+ viewBox: "0 0 20 20",
1164
+ children: /* @__PURE__ */ c("path", { d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" })
773
1165
  }),
774
- /* @__PURE__ */ c("rect", {
775
- x: "1",
776
- y: "15",
777
- width: "12",
778
- height: "2",
779
- rx: "1"
1166
+ /* @__PURE__ */ c("span", {
1167
+ className: _,
1168
+ "data-i18n": "paragraph",
1169
+ children: "Paragraph options"
780
1170
  })
781
1171
  ]
782
1172
  })
783
- }), /* @__PURE__ */ c("span", {
784
- className: "forge-tooltip",
785
- "data-i18n": "paragraph",
786
- children: "Paragraph"
787
- })]
1173
+ ]
788
1174
  }),
789
- /* @__PURE__ */ c("div", {
790
- ref: a,
791
- className: "forge-toolbar-dropdown forge-dropdown-paragraph",
1175
+ d && /* @__PURE__ */ c("div", {
1176
+ className: "forge-toolbar-dropdown absolute left-0 top-full mt-1 z-20 min-w-[130px] rounded-md border border-[#ccc] bg-white p-1 shadow-lg rtl:left-auto rtl:right-0 block",
792
1177
  role: "list",
793
1178
  "aria-label": "Paragraph options",
794
1179
  children: [/* @__PURE__ */ c("div", {
795
- className: "forge-toolbar-group forge-toolbar-align",
1180
+ className: "forge-toolbar-group forge-toolbar-align mb-0.5 flex gap-0.5 border-b border-[#eee] pb-1",
796
1181
  children: [
797
1182
  /* @__PURE__ */ c("button", {
798
1183
  type: "button",
799
- className: "forge-toolbar-button",
800
- onClick: () => t("justifyLeft"),
1184
+ className: v,
1185
+ onMouseDown: (e) => {
1186
+ m(e, s, "left"), f(!1);
1187
+ },
801
1188
  "aria-label": "Align left",
802
1189
  children: [/* @__PURE__ */ c("span", {
803
- className: "forge-toolbar-icon",
1190
+ className: g,
804
1191
  children: /* @__PURE__ */ c("svg", {
805
1192
  viewBox: "0 0 20 20",
806
- width: "16",
807
- height: "16",
1193
+ className: "block h-4 w-4",
808
1194
  children: [
809
1195
  /* @__PURE__ */ c("rect", {
810
1196
  x: "1",
811
- y: "3",
1197
+ y: "4",
812
1198
  width: "18",
813
1199
  height: "2",
814
- rx: "1"
1200
+ rx: "1",
1201
+ fill: "black"
815
1202
  }),
816
1203
  /* @__PURE__ */ c("rect", {
817
1204
  x: "1",
818
1205
  y: "9",
819
1206
  width: "12",
820
1207
  height: "2",
821
- rx: "1"
1208
+ rx: "1",
1209
+ fill: "black"
822
1210
  }),
823
1211
  /* @__PURE__ */ c("rect", {
824
1212
  x: "1",
825
- y: "15",
1213
+ y: "14",
826
1214
  width: "18",
827
1215
  height: "2",
828
- rx: "1"
1216
+ rx: "1",
1217
+ fill: "black"
829
1218
  })
830
1219
  ]
831
1220
  })
832
1221
  }), /* @__PURE__ */ c("span", {
833
- className: "forge-tooltip",
1222
+ className: _,
834
1223
  "data-i18n": "alignLeft",
835
- children: "Left"
1224
+ children: "Align left"
836
1225
  })]
837
1226
  }),
838
1227
  /* @__PURE__ */ c("button", {
839
1228
  type: "button",
840
- className: "forge-toolbar-button",
841
- onClick: () => t("justifyCenter"),
1229
+ className: v,
1230
+ onMouseDown: (e) => {
1231
+ m(e, s, "center"), f(!1);
1232
+ },
842
1233
  "aria-label": "Align center",
843
1234
  children: [/* @__PURE__ */ c("span", {
844
- className: "forge-toolbar-icon",
1235
+ className: g,
845
1236
  children: /* @__PURE__ */ c("svg", {
846
1237
  viewBox: "0 0 20 20",
847
- width: "16",
848
- height: "16",
1238
+ className: "block h-4 w-4",
849
1239
  children: [
850
1240
  /* @__PURE__ */ c("rect", {
851
1241
  x: "1",
852
- y: "3",
1242
+ y: "4",
853
1243
  width: "18",
854
1244
  height: "2",
855
- rx: "1"
1245
+ rx: "1",
1246
+ fill: "black"
856
1247
  }),
857
1248
  /* @__PURE__ */ c("rect", {
858
1249
  x: "4",
859
1250
  y: "9",
860
1251
  width: "12",
861
1252
  height: "2",
862
- rx: "1"
1253
+ rx: "1",
1254
+ fill: "black"
863
1255
  }),
864
1256
  /* @__PURE__ */ c("rect", {
865
1257
  x: "1",
866
- y: "15",
1258
+ y: "14",
867
1259
  width: "18",
868
1260
  height: "2",
869
- rx: "1"
1261
+ rx: "1",
1262
+ fill: "black"
870
1263
  })
871
1264
  ]
872
1265
  })
873
1266
  }), /* @__PURE__ */ c("span", {
874
- className: "forge-tooltip",
1267
+ className: _,
875
1268
  "data-i18n": "alignCenter",
876
- children: "Center"
1269
+ children: "Align center"
877
1270
  })]
878
1271
  }),
879
1272
  /* @__PURE__ */ c("button", {
880
1273
  type: "button",
881
- className: "forge-toolbar-button",
882
- onClick: () => t("justifyRight"),
1274
+ className: v,
1275
+ onMouseDown: (e) => {
1276
+ m(e, s, "right"), f(!1);
1277
+ },
883
1278
  "aria-label": "Align right",
884
1279
  children: [/* @__PURE__ */ c("span", {
885
- className: "forge-toolbar-icon",
1280
+ className: g,
886
1281
  children: /* @__PURE__ */ c("svg", {
887
1282
  viewBox: "0 0 20 20",
888
- width: "16",
889
- height: "16",
1283
+ className: "block h-4 w-4",
890
1284
  children: [
891
1285
  /* @__PURE__ */ c("rect", {
892
1286
  x: "1",
893
- y: "3",
1287
+ y: "4",
894
1288
  width: "18",
895
1289
  height: "2",
896
- rx: "1"
1290
+ rx: "1",
1291
+ fill: "black"
897
1292
  }),
898
1293
  /* @__PURE__ */ c("rect", {
899
1294
  x: "7",
900
1295
  y: "9",
901
1296
  width: "12",
902
1297
  height: "2",
903
- rx: "1"
1298
+ rx: "1",
1299
+ fill: "black"
904
1300
  }),
905
1301
  /* @__PURE__ */ c("rect", {
906
1302
  x: "1",
907
- y: "15",
1303
+ y: "14",
908
1304
  width: "18",
909
1305
  height: "2",
910
- rx: "1"
1306
+ rx: "1",
1307
+ fill: "black"
911
1308
  })
912
1309
  ]
913
1310
  })
914
1311
  }), /* @__PURE__ */ c("span", {
915
- className: "forge-tooltip",
1312
+ className: _,
916
1313
  "data-i18n": "alignRight",
917
- children: "Right"
1314
+ children: "Align right"
918
1315
  })]
919
1316
  }),
920
1317
  /* @__PURE__ */ c("button", {
921
1318
  type: "button",
922
- className: "forge-toolbar-button",
923
- onClick: () => t("justifyFull"),
1319
+ className: v,
1320
+ onMouseDown: (e) => {
1321
+ m(e, s, "justify"), f(!1);
1322
+ },
924
1323
  "aria-label": "Justify",
925
1324
  children: [/* @__PURE__ */ c("span", {
926
- className: "forge-toolbar-icon",
1325
+ className: g,
927
1326
  children: /* @__PURE__ */ c("svg", {
928
1327
  viewBox: "0 0 20 20",
929
- width: "16",
930
- height: "16",
1328
+ className: "block h-4 w-4",
931
1329
  children: [
932
1330
  /* @__PURE__ */ c("rect", {
933
1331
  x: "1",
934
- y: "3",
1332
+ y: "4",
935
1333
  width: "18",
936
1334
  height: "2",
937
- rx: "1"
1335
+ rx: "1",
1336
+ fill: "black"
938
1337
  }),
939
1338
  /* @__PURE__ */ c("rect", {
940
1339
  x: "1",
941
1340
  y: "9",
942
1341
  width: "18",
943
1342
  height: "2",
944
- rx: "1"
1343
+ rx: "1",
1344
+ fill: "black"
945
1345
  }),
946
1346
  /* @__PURE__ */ c("rect", {
947
1347
  x: "1",
948
- y: "15",
1348
+ y: "14",
949
1349
  width: "18",
950
1350
  height: "2",
951
- rx: "1"
1351
+ rx: "1",
1352
+ fill: "black"
952
1353
  })
953
1354
  ]
954
1355
  })
955
1356
  }), /* @__PURE__ */ c("span", {
956
- className: "forge-tooltip",
1357
+ className: _,
957
1358
  "data-i18n": "justify",
958
1359
  children: "Justify"
959
1360
  })]
960
1361
  })
961
1362
  ]
962
1363
  }), /* @__PURE__ */ c("div", {
963
- className: "forge-toolbar-group forge-toolbar-list",
1364
+ className: "forge-toolbar-group forge-toolbar-list flex gap-0.5 py-0.5",
964
1365
  children: [/* @__PURE__ */ c("button", {
965
1366
  type: "button",
966
- className: "forge-toolbar-button",
967
- onClick: () => t("outdent"),
1367
+ className: v,
1368
+ onMouseDown: (e) => {
1369
+ m(e, l), f(!1);
1370
+ },
968
1371
  "aria-label": "Outdent",
969
1372
  children: [/* @__PURE__ */ c("span", {
970
- className: "forge-toolbar-icon",
1373
+ className: g,
971
1374
  children: /* @__PURE__ */ c("svg", {
972
1375
  viewBox: "0 0 20 20",
973
- width: "16",
974
- height: "16",
1376
+ className: "block h-4 w-4",
975
1377
  fill: "none",
976
- stroke: "currentColor",
1378
+ stroke: "black",
977
1379
  strokeWidth: "2",
978
1380
  strokeLinecap: "round",
979
1381
  strokeLinejoin: "round",
980
1382
  children: [
981
1383
  /* @__PURE__ */ c("line", {
982
1384
  x1: "9",
983
- y1: "3",
1385
+ y1: "4",
984
1386
  x2: "19",
985
- y2: "3"
1387
+ y2: "4"
986
1388
  }),
987
1389
  /* @__PURE__ */ c("line", {
988
1390
  x1: "9",
@@ -992,40 +1394,41 @@ function ee({ logic: e }) {
992
1394
  }),
993
1395
  /* @__PURE__ */ c("line", {
994
1396
  x1: "9",
995
- y1: "17",
1397
+ y1: "16",
996
1398
  x2: "19",
997
- y2: "17"
1399
+ y2: "16"
998
1400
  }),
999
- /* @__PURE__ */ c("polyline", { points: "6,7 2,10 6,13" })
1401
+ /* @__PURE__ */ c("polyline", { points: "6,8 2,12 6,16" })
1000
1402
  ]
1001
1403
  })
1002
1404
  }), /* @__PURE__ */ c("span", {
1003
- className: "forge-tooltip",
1405
+ className: _,
1004
1406
  "data-i18n": "outdent",
1005
1407
  children: "Outdent"
1006
1408
  })]
1007
1409
  }), /* @__PURE__ */ c("button", {
1008
1410
  type: "button",
1009
- className: "forge-toolbar-button",
1010
- onClick: () => t("indent"),
1411
+ className: v,
1412
+ onMouseDown: (e) => {
1413
+ m(e, u), f(!1);
1414
+ },
1011
1415
  "aria-label": "Indent",
1012
1416
  children: [/* @__PURE__ */ c("span", {
1013
- className: "forge-toolbar-icon",
1417
+ className: g,
1014
1418
  children: /* @__PURE__ */ c("svg", {
1015
1419
  viewBox: "0 0 20 20",
1016
- width: "16",
1017
- height: "16",
1420
+ className: "block h-4 w-4",
1018
1421
  fill: "none",
1019
- stroke: "currentColor",
1422
+ stroke: "black",
1020
1423
  strokeWidth: "2",
1021
1424
  strokeLinecap: "round",
1022
1425
  strokeLinejoin: "round",
1023
1426
  children: [
1024
1427
  /* @__PURE__ */ c("line", {
1025
1428
  x1: "9",
1026
- y1: "3",
1429
+ y1: "4",
1027
1430
  x2: "19",
1028
- y2: "3"
1431
+ y2: "4"
1029
1432
  }),
1030
1433
  /* @__PURE__ */ c("line", {
1031
1434
  x1: "9",
@@ -1035,15 +1438,15 @@ function ee({ logic: e }) {
1035
1438
  }),
1036
1439
  /* @__PURE__ */ c("line", {
1037
1440
  x1: "9",
1038
- y1: "17",
1441
+ y1: "16",
1039
1442
  x2: "19",
1040
- y2: "17"
1443
+ y2: "16"
1041
1444
  }),
1042
- /* @__PURE__ */ c("polyline", { points: "2,7 6,10 2,13" })
1445
+ /* @__PURE__ */ c("polyline", { points: "2,8 6,12 2,16" })
1043
1446
  ]
1044
1447
  })
1045
1448
  }), /* @__PURE__ */ c("span", {
1046
- className: "forge-tooltip",
1449
+ className: _,
1047
1450
  "data-i18n": "indent",
1048
1451
  children: "Indent"
1049
1452
  })]
@@ -1055,72 +1458,237 @@ function ee({ logic: e }) {
1055
1458
  }
1056
1459
  //#endregion
1057
1460
  //#region src/components/shared/toolbar/Paragraph/Hooks/paragraphLogic.jsx
1058
- function k() {
1059
- return { execCommand: (e) => {
1060
- document.execCommand(e, !1, null);
1061
- } };
1461
+ function j() {
1462
+ let e = window.getSelection();
1463
+ return e && e.rangeCount > 0 ? e.getRangeAt(0).cloneRange() : null;
1464
+ }
1465
+ function M(e) {
1466
+ if (!e) return;
1467
+ let t = window.getSelection();
1468
+ t && (t.removeAllRanges(), t.addRange(e));
1469
+ }
1470
+ function N(e) {
1471
+ if (!e) return;
1472
+ let t = document.createRange();
1473
+ t.selectNodeContents(e), t.collapse(!1);
1474
+ let n = window.getSelection();
1475
+ n && (n.removeAllRanges(), n.addRange(t));
1476
+ }
1477
+ function P(e) {
1478
+ if (!e || e.nodeType !== 1) return !1;
1479
+ let t = e.tagName.toLowerCase();
1480
+ return [
1481
+ "p",
1482
+ "div",
1483
+ "h1",
1484
+ "h2",
1485
+ "h3",
1486
+ "h4",
1487
+ "h5",
1488
+ "h6",
1489
+ "li",
1490
+ "blockquote",
1491
+ "pre"
1492
+ ].includes(t);
1493
+ }
1494
+ function F(e) {
1495
+ if (!e) return null;
1496
+ let t = e.nodeType === 3 ? e.parentNode : e;
1497
+ for (; t && t !== document.body && !P(t);) t = t.parentNode;
1498
+ return t && P(t) ? t : null;
1499
+ }
1500
+ function I(e) {
1501
+ if (!e) return null;
1502
+ let t = e.nodeType === 3 ? e.parentNode : e;
1503
+ for (; t && t !== document.body && t.tagName !== "LI";) t = t.parentNode;
1504
+ return t && t.tagName === "LI" ? t : null;
1505
+ }
1506
+ function L(e) {
1507
+ let t = document.createElement(e);
1508
+ return t.className = e === "ul" ? "list-disc pl-5 my-2" : "list-decimal pl-5 my-2", t;
1509
+ }
1510
+ function R(e, t) {
1511
+ let n = L(t), r = document.createElement("li");
1512
+ return r.innerHTML = e.innerHTML, n.appendChild(r), e.parentNode.replaceChild(n, e), r;
1513
+ }
1514
+ function z(e) {
1515
+ let t = e.parentNode, n = document.createDocumentFragment(), r = Array.from(e.children), i = null;
1516
+ return r.forEach((e) => {
1517
+ let t = document.createElement("div");
1518
+ t.innerHTML = e.innerHTML, n.appendChild(t), i = t;
1519
+ }), t.replaceChild(n, e), i;
1520
+ }
1521
+ function B(e, t) {
1522
+ let n = L(t);
1523
+ return n.innerHTML = e.innerHTML, e.parentNode.replaceChild(n, e), n;
1524
+ }
1525
+ function V() {
1526
+ let e = r(null), t = () => {
1527
+ e.current = j();
1528
+ }, n = (t) => {
1529
+ M(e.current);
1530
+ let n = window.getSelection();
1531
+ if (!n || !n.rangeCount) return;
1532
+ let r = n.anchorNode;
1533
+ if (!r) return;
1534
+ r.nodeType === 3 && (r = r.parentNode);
1535
+ let i = I(r);
1536
+ if (i) {
1537
+ let n = i.parentNode;
1538
+ if (n && (n.tagName === "UL" || n.tagName === "OL")) {
1539
+ if (n.tagName.toLowerCase() === t) {
1540
+ let e = z(n);
1541
+ e && N(e);
1542
+ } else {
1543
+ let e = B(n, t).lastElementChild;
1544
+ e && N(e);
1545
+ }
1546
+ e.current = j();
1547
+ return;
1548
+ }
1549
+ }
1550
+ let a = F(r);
1551
+ if (a) {
1552
+ if (a.getAttribute && a.getAttribute("contenteditable") === "true") {
1553
+ let e = document.createElement("div");
1554
+ e.innerHTML = a.innerHTML, a.innerHTML = "", a.appendChild(e), N(R(e, t));
1555
+ } else N(R(a, t));
1556
+ e.current = j();
1557
+ }
1558
+ };
1559
+ return {
1560
+ saveSelectionRange: t,
1561
+ toggleUnorderedList: () => n("ul"),
1562
+ toggleOrderedList: () => n("ol"),
1563
+ setAlignment: (t) => {
1564
+ M(e.current);
1565
+ let n = window.getSelection();
1566
+ if (!n || !n.rangeCount) return;
1567
+ let r = n.anchorNode;
1568
+ if (!r) return;
1569
+ r.nodeType === 3 && (r = r.parentNode);
1570
+ let i = r.closest("p, div, h1, h2, h3, h4, h5, h6, li, blockquote, pre");
1571
+ i && (i.style.textAlign = t), e.current = j();
1572
+ },
1573
+ indent: () => {
1574
+ M(e.current);
1575
+ let t = window.getSelection();
1576
+ if (!t || !t.rangeCount) return;
1577
+ let n = t.anchorNode;
1578
+ if (!n) return;
1579
+ n.nodeType === 3 && (n = n.parentNode);
1580
+ let r = I(n);
1581
+ if (r) {
1582
+ let e = r.parentNode;
1583
+ if (!e || e.tagName !== "UL" && e.tagName !== "OL") return;
1584
+ let t = r.previousElementSibling;
1585
+ if (!t || t.tagName !== "LI") return;
1586
+ let n = t.querySelector(":scope > ul, :scope > ol");
1587
+ n || (n = L(e.tagName.toLowerCase()), t.appendChild(n)), n.appendChild(r), N(r);
1588
+ } else {
1589
+ let e = F(n);
1590
+ if (!e) return;
1591
+ let t = parseInt(e.style.marginLeft) || 0;
1592
+ e.style.marginLeft = t + 20 + "px";
1593
+ }
1594
+ e.current = j();
1595
+ },
1596
+ outdent: () => {
1597
+ M(e.current);
1598
+ let t = window.getSelection();
1599
+ if (!t || !t.rangeCount) return;
1600
+ let n = t.anchorNode;
1601
+ if (!n) return;
1602
+ n.nodeType === 3 && (n = n.parentNode);
1603
+ let r = I(n);
1604
+ if (r) {
1605
+ let e = r.parentNode;
1606
+ if (!e || e.tagName !== "UL" && e.tagName !== "OL") return;
1607
+ let t = e.parentNode;
1608
+ if (t && t.tagName === "LI") t.parentNode.insertBefore(r, t.nextSibling), e.children.length === 0 && e.remove(), N(r);
1609
+ else {
1610
+ let t = document.createElement("div");
1611
+ t.innerHTML = r.innerHTML;
1612
+ let n = e.parentNode;
1613
+ e.children.length === 1 ? n.replaceChild(t, e) : (n.insertBefore(t, e.nextSibling), e.removeChild(r)), N(t);
1614
+ }
1615
+ } else {
1616
+ let e = F(n);
1617
+ if (!e) return;
1618
+ let t = parseInt(e.style.marginLeft) || 0;
1619
+ e.style.marginLeft = Math.max(0, t - 20) + "px";
1620
+ }
1621
+ e.current = j();
1622
+ }
1623
+ };
1062
1624
  }
1063
1625
  //#endregion
1064
1626
  //#region src/components/shared/toolbar/Paragraph/Components/index.jsx
1065
- function A() {
1066
- return /* @__PURE__ */ c(ee, { logic: k() });
1627
+ function H() {
1628
+ return /* @__PURE__ */ c(le, { logic: V() });
1067
1629
  }
1068
1630
  //#endregion
1069
1631
  //#region src/components/shared/toolbar/Table/Components/TableToolbar.jsx
1070
- var j = 10;
1071
- function M({ logic: e }) {
1072
- let { insertTable: t } = e, [a, o] = i(1), [s, l] = i(1), u = r(null), d = r(null), f = r(null);
1632
+ var U = 10;
1633
+ function W({ logic: e }) {
1634
+ let { insertTable: t } = e, [a, o] = i(1), [s, l] = i(1), [u, d] = i(!1), f = r(null), p = r(null), m = r(null);
1073
1635
  n(() => {
1074
- if (u.current && d.current) return m(u.current, d.current);
1075
- }, []);
1076
- let p = (e) => {
1077
- if (!f.current) return;
1078
- let t = f.current.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top, i = t.width / j, a = Math.min(Math.floor(n / i) + 1, j), s = Math.min(Math.floor(r / i) + 1, j);
1636
+ if (!u) return;
1637
+ function e(e) {
1638
+ p.current && !p.current.contains(e.target) && f.current && !f.current.contains(e.target) && d(!1);
1639
+ }
1640
+ return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
1641
+ }, [u]);
1642
+ let h = (e) => {
1643
+ if (!m.current) return;
1644
+ let t = m.current.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top, i = t.width / U, a = Math.min(Math.floor(n / i) + 1, U), s = Math.min(Math.floor(r / i) + 1, U);
1079
1645
  l(a), o(s);
1080
- }, h = () => {
1081
- o(1), l(1);
1082
1646
  }, g = () => {
1083
- t(a, s), d.current && d.current.classList.remove("is-open"), u.current && u.current.classList.remove("is-active"), o(1), l(1);
1084
- }, _ = s / j * 100, v = a / j * 100;
1647
+ o(1), l(1);
1648
+ }, _ = () => {
1649
+ t(a, s), d(!1), o(1), l(1);
1650
+ }, v = s / U * 100, y = a / U * 100;
1085
1651
  return /* @__PURE__ */ c("div", {
1086
- className: "forge-toolbar-group forge-toolbar-table",
1652
+ className: "forge-toolbar-group forge-toolbar-table relative flex items-center gap-0.5",
1087
1653
  children: [/* @__PURE__ */ c("button", {
1088
- ref: u,
1654
+ ref: f,
1089
1655
  type: "button",
1090
- className: "forge-toolbar-button",
1656
+ className: "forge-toolbar-button group relative flex h-8 cursor-pointer items-center justify-center rounded-[2px] border border-[#ccc] bg-white px-2 text-sm leading-none transition-all duration-150 hover:bg-[#f0f0f0] active:translate-y-px",
1091
1657
  "aria-label": "Table",
1658
+ onClick: () => d(!u),
1092
1659
  children: [/* @__PURE__ */ c("span", {
1093
1660
  className: "forge-toolbar-icon",
1094
1661
  children: "▦"
1095
1662
  }), /* @__PURE__ */ c("span", {
1096
- className: "forge-tooltip",
1663
+ className: "pointer-events-none absolute left-1/2 top-[calc(100%+8px)] z-30 -translate-x-1/2 whitespace-nowrap rounded-md border border-[#2c2c2c] bg-[#1e1e1e] px-2.5 py-1 text-[11px] font-medium leading-none text-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100 rtl:left-1/2 rtl:-translate-x-1/2 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:border-x-[5px] before:border-b-[5px] before:border-t-0 before:border-solid before:border-x-transparent before:border-b-[#2c2c2c] after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:translate-y-[1px] after:border-x-[4px] after:border-b-[4px] after:border-t-0 after:border-solid after:border-x-transparent after:border-b-[#1e1e1e]",
1097
1664
  "data-i18n": "table",
1098
1665
  children: "Table"
1099
1666
  })]
1100
1667
  }), /* @__PURE__ */ c("div", {
1101
- ref: d,
1102
- className: "forge-toolbar-dropdown forge-dropdown-table",
1668
+ ref: p,
1669
+ className: `forge-toolbar-dropdown forge-dropdown-table absolute left-0 top-full z-10 mt-1 min-w-[160px] rounded-[3px] border border-[#ccc] bg-white p-2 shadow-[0_2px_6px_rgba(0,0,0,0.15)] rtl:left-auto rtl:right-0 ${u ? "block" : "hidden"}`,
1103
1670
  role: "list",
1104
1671
  "aria-label": "Insert table",
1105
1672
  children: [/* @__PURE__ */ c("div", {
1106
- ref: f,
1107
- className: "note-dimension-picker",
1108
- onMouseMove: p,
1109
- onMouseLeave: h,
1110
- onClick: g,
1673
+ ref: m,
1674
+ className: "note-dimension-picker relative mx-auto h-40 w-40 cursor-pointer overflow-hidden rounded-[3px] border border-[#ccc] bg-[#f5f5f5]",
1675
+ onMouseMove: h,
1676
+ onMouseLeave: g,
1677
+ onClick: _,
1111
1678
  children: [
1112
- /* @__PURE__ */ c("div", { className: "note-dimension-picker-mousecatcher" }),
1679
+ /* @__PURE__ */ c("div", { className: "absolute inset-0 z-[5]" }),
1113
1680
  /* @__PURE__ */ c("div", {
1114
- className: "note-dimension-picker-highlighted",
1681
+ className: "pointer-events-none absolute left-0 top-0 z-[3] border-2 border-[#4a90d9] bg-[rgba(74,144,217,0.4)] transition-[width,height] duration-75 ease-in-out",
1115
1682
  style: {
1116
- width: _ + "%",
1117
- height: v + "%"
1683
+ width: v + "%",
1684
+ height: y + "%"
1118
1685
  }
1119
1686
  }),
1120
- /* @__PURE__ */ c("div", { className: "note-dimension-picker-unhighlighted" })
1687
+ /* @__PURE__ */ c("div", { className: "pointer-events-none absolute inset-0 z-[2] bg-white/30" }),
1688
+ /* @__PURE__ */ c("div", { className: "pointer-events-none absolute inset-0 z-[1] bg-[linear-gradient(rgba(0,0,0,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.05)_1px,transparent_1px)] bg-[size:16px_16px]" })
1121
1689
  ]
1122
1690
  }), /* @__PURE__ */ c("div", {
1123
- className: "note-dimension-display",
1691
+ className: "note-dimension-display px-0 pt-1.5 pb-0.5 text-center text-[13px] font-semibold text-[#333]",
1124
1692
  children: [
1125
1693
  a,
1126
1694
  " x ",
@@ -1132,7 +1700,7 @@ function M({ logic: e }) {
1132
1700
  }
1133
1701
  //#endregion
1134
1702
  //#region src/components/shared/toolbar/Table/Hooks/tableLogic.jsx
1135
- function N() {
1703
+ function G() {
1136
1704
  let e = document.querySelector(".forge-editor__content");
1137
1705
  if (e) {
1138
1706
  e.focus();
@@ -1143,81 +1711,78 @@ function N() {
1143
1711
  }
1144
1712
  }
1145
1713
  }
1146
- function P(e) {
1714
+ function K(e) {
1147
1715
  let t = window.getSelection();
1148
1716
  if (!t || !t.rangeCount) {
1149
- N(), setTimeout(() => P(e), 50);
1717
+ G(), setTimeout(() => K(e), 50);
1150
1718
  return;
1151
1719
  }
1152
1720
  let n = t.getRangeAt(0);
1153
- if (n.collapsed) {
1154
- let r = n.createContextualFragment(e);
1155
- n.insertNode(r);
1156
- let i = r.lastChild;
1157
- i ? (n.setStartAfter(i), n.collapse(!0)) : n.collapse(!1), t.removeAllRanges(), t.addRange(n);
1158
- } else document.execCommand("insertHTML", !1, e);
1159
- }
1160
- function F() {
1721
+ n.deleteContents();
1722
+ let r = n.createContextualFragment(e), i = r.lastChild;
1723
+ n.insertNode(r), i ? (n.setStartAfter(i), n.collapse(!0)) : n.collapse(!1), t.removeAllRanges(), t.addRange(n);
1724
+ }
1725
+ function q() {
1161
1726
  return { insertTable: (e, t) => {
1162
- let n = "<table style=\"width:100%;border-collapse:collapse;border:1px solid #ddd;\">";
1163
- for (let r = 0; r < e; r++) {
1164
- n += "<tr>";
1165
- for (let e = 0; e < t; e++) n += "<td style=\"border:1px solid #ddd;padding:8px;\"><br></td>";
1166
- n += "</tr>";
1727
+ let n = (100 / t).toFixed(2) + "%", r = "<table style=\"width:100%;table-layout:fixed;border-collapse:collapse;border:1px solid #ddd;\">";
1728
+ for (let i = 0; i < e; i++) {
1729
+ r += "<tr>";
1730
+ for (let e = 0; e < t; e++) r += `<td style="border:1px solid #ddd;padding:8px;width:${n};text-align:center;vertical-align:middle;overflow:hidden;word-break:break-word;"><br></td>`;
1731
+ r += "</tr>";
1167
1732
  }
1168
- n += "</table><br>", N(), P(n);
1733
+ r += "</table><br>", G(), K(r);
1169
1734
  } };
1170
1735
  }
1171
1736
  //#endregion
1172
1737
  //#region src/components/shared/toolbar/Table/Components/index.jsx
1173
- function I() {
1174
- return /* @__PURE__ */ c(M, { logic: F() });
1738
+ function ue() {
1739
+ return /* @__PURE__ */ c(W, { logic: q() });
1175
1740
  }
1176
1741
  //#endregion
1177
1742
  //#region src/components/shared/toolbar/Insert/Components/InsertToolbar.jsx
1178
- function L({ logic: e }) {
1179
- let { insertLink: t, insertImage: n, insertVideo: r } = e;
1743
+ function de({ logic: e }) {
1744
+ let { insertLink: t, insertImage: n, insertVideo: r } = e, i = "forge-toolbar-button group relative flex h-8 cursor-pointer items-center justify-center gap-0.5 rounded-[2px] border border-[#ccc] bg-white px-[7px] py-1 text-sm leading-none transition-all duration-150 hover:bg-[#f0f0f0] active:translate-y-px", a = "forge-toolbar-icon inline-block min-w-4 text-center text-sm font-medium leading-none", o = "pointer-events-none absolute left-1/2 top-[calc(100%+8px)] z-30 -translate-x-1/2 whitespace-nowrap rounded-md border border-[#2c2c2c] bg-[#1e1e1e] px-2.5 py-1 text-[11px] font-medium leading-none text-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100 rtl:left-1/2 rtl:-translate-x-1/2 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:border-x-[5px] before:border-b-[5px] before:border-t-0 before:border-solid before:border-x-transparent before:border-b-[#2c2c2c] after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:translate-y-[1px] after:border-x-[4px] after:border-b-[4px] after:border-t-0 after:border-solid after:border-x-transparent after:border-b-[#1e1e1e]";
1180
1745
  return /* @__PURE__ */ c("div", {
1181
- className: "forge-toolbar-group forge-toolbar-insert",
1746
+ className: "forge-toolbar-group forge-toolbar-insert flex items-center gap-0.5",
1182
1747
  children: [
1183
1748
  /* @__PURE__ */ c("button", {
1184
1749
  type: "button",
1185
- className: "forge-toolbar-button",
1750
+ className: i,
1186
1751
  onClick: t,
1187
1752
  "aria-label": "Link",
1188
1753
  children: [/* @__PURE__ */ c("span", {
1189
- className: "forge-toolbar-icon",
1754
+ className: a,
1190
1755
  children: "🔗"
1191
1756
  }), /* @__PURE__ */ c("span", {
1192
- className: "forge-tooltip",
1757
+ className: o,
1193
1758
  "data-i18n": "link",
1194
1759
  children: "Link"
1195
1760
  })]
1196
1761
  }),
1197
1762
  /* @__PURE__ */ c("button", {
1198
1763
  type: "button",
1199
- className: "forge-toolbar-button",
1764
+ className: i,
1200
1765
  onClick: n,
1201
1766
  "aria-label": "Image",
1202
1767
  children: [/* @__PURE__ */ c("span", {
1203
- className: "forge-toolbar-icon",
1768
+ className: a,
1204
1769
  children: "🖼"
1205
1770
  }), /* @__PURE__ */ c("span", {
1206
- className: "forge-tooltip",
1771
+ className: o,
1207
1772
  "data-i18n": "image",
1208
1773
  children: "Image"
1209
1774
  })]
1210
1775
  }),
1211
1776
  /* @__PURE__ */ c("button", {
1212
1777
  type: "button",
1213
- className: "forge-toolbar-button",
1778
+ className: i,
1214
1779
  onClick: r,
1215
1780
  "aria-label": "Video",
1216
1781
  children: [/* @__PURE__ */ c("span", {
1217
- className: "forge-toolbar-icon",
1782
+ className: a,
1218
1783
  children: "▶"
1219
1784
  }), /* @__PURE__ */ c("span", {
1220
- className: "forge-tooltip",
1785
+ className: o,
1221
1786
  "data-i18n": "video",
1222
1787
  children: "Video"
1223
1788
  })]
@@ -1227,7 +1792,7 @@ function L({ logic: e }) {
1227
1792
  }
1228
1793
  //#endregion
1229
1794
  //#region src/components/shared/Hooks/sweetAlert.jsx
1230
- function R({ title: e, inputs: t, confirmText: n, cancelText: r }) {
1795
+ function J({ title: e, inputs: t, confirmText: n, cancelText: r }) {
1231
1796
  let i = t.map((e, t) => `<input id="${`swal-input-${t}`}" class="swal2-input" placeholder="${e.placeholder || ""}" value="${e.value || ""}">`).join("");
1232
1797
  return a.fire({
1233
1798
  title: e,
@@ -1249,16 +1814,16 @@ function R({ title: e, inputs: t, confirmText: n, cancelText: r }) {
1249
1814
  }
1250
1815
  //#endregion
1251
1816
  //#region src/components/shared/toolbar/Insert/Hooks/insertLogic.jsx
1252
- function z() {
1817
+ function Y() {
1253
1818
  let e = window.getSelection();
1254
1819
  return e && e.rangeCount > 0 ? e.getRangeAt(0).cloneRange() : null;
1255
1820
  }
1256
- function B(e) {
1821
+ function X(e) {
1257
1822
  if (!e) return;
1258
1823
  let t = window.getSelection();
1259
1824
  t && (t.removeAllRanges(), t.addRange(e));
1260
1825
  }
1261
- function V() {
1826
+ function fe() {
1262
1827
  let e = document.querySelector(".forge-editor__content");
1263
1828
  if (e) {
1264
1829
  e.focus();
@@ -1269,24 +1834,21 @@ function V() {
1269
1834
  }
1270
1835
  }
1271
1836
  }
1272
- function H(e) {
1837
+ function Z(e) {
1273
1838
  let t = window.getSelection();
1274
1839
  if (!t || !t.rangeCount) {
1275
- V(), setTimeout(() => H(e), 50);
1840
+ fe(), setTimeout(() => Z(e), 50);
1276
1841
  return;
1277
1842
  }
1278
1843
  let n = t.getRangeAt(0);
1279
- if (n.collapsed) {
1280
- let r = n.createContextualFragment(e);
1281
- n.insertNode(r);
1282
- let i = r.lastChild;
1283
- i ? (n.setStartAfter(i), n.collapse(!0)) : n.collapse(!1), t.removeAllRanges(), t.addRange(n);
1284
- } else document.execCommand("insertHTML", !1, e);
1285
- }
1286
- function U() {
1844
+ n.deleteContents();
1845
+ let r = n.createContextualFragment(e), i = r.lastChild;
1846
+ n.insertNode(r), i ? (n.setStartAfter(i), n.collapse(!0)) : n.collapse(!1), t.removeAllRanges(), t.addRange(n);
1847
+ }
1848
+ function pe() {
1287
1849
  return {
1288
1850
  insertLink: async () => {
1289
- let e = z(), t = await R({
1851
+ let e = Y(), t = await J({
1290
1852
  title: "Insert Link",
1291
1853
  inputs: [{
1292
1854
  placeholder: "URL",
@@ -1298,13 +1860,13 @@ function U() {
1298
1860
  cancelText: "Cancel"
1299
1861
  });
1300
1862
  if (t.isConfirmed && t.value) {
1301
- B(e);
1863
+ X(e);
1302
1864
  let [n, r] = t.value;
1303
- H(r ? `<a href="${n}" target="_blank">${r}</a>` : `<a href="${n}" target="_blank">${n}</a>`);
1865
+ Z(r ? `<a href="${n}" target="_blank" rel="noopener">${r}</a>` : `<a href="${n}" target="_blank" rel="noopener">${n}</a>`);
1304
1866
  }
1305
1867
  },
1306
1868
  insertImage: async () => {
1307
- let e = z(), t = await R({
1869
+ let e = Y(), t = await J({
1308
1870
  title: "Insert Image",
1309
1871
  inputs: [{
1310
1872
  placeholder: "Image URL",
@@ -1319,13 +1881,13 @@ function U() {
1319
1881
  cancelText: "Cancel"
1320
1882
  });
1321
1883
  if (t.isConfirmed && t.value) {
1322
- B(e);
1884
+ X(e);
1323
1885
  let [n, r] = t.value;
1324
- H(`<img src="${n}" alt="${r}" style="max-width: 100%;">`);
1886
+ Z(`<img src="${n}" alt="${r}" style="max-width: 100%;">`);
1325
1887
  }
1326
1888
  },
1327
1889
  insertVideo: async () => {
1328
- let e = z(), t = await R({
1890
+ let e = Y(), t = await J({
1329
1891
  title: "Insert Video",
1330
1892
  inputs: [{
1331
1893
  placeholder: "Video URL (YouTube/Vimeo)",
@@ -1337,47 +1899,47 @@ function U() {
1337
1899
  cancelText: "Cancel"
1338
1900
  });
1339
1901
  if (t.isConfirmed && t.value) {
1340
- B(e);
1902
+ X(e);
1341
1903
  let [n] = t.value, r;
1342
- r = n.includes("youtube.com") || n.includes("youtu.be") ? `<iframe width="560" height="315" src="${n.replace("watch?v=", "embed/").replace("youtu.be/", "youtube.com/embed/")}" frameborder="0" allowfullscreen></iframe>` : `<video controls src="${n}" style="max-width: 100%;"></video>`, H(r);
1904
+ r = n.includes("youtube.com") || n.includes("youtu.be") ? `<iframe width="560" height="315" src="${n.replace("watch?v=", "embed/").replace("youtu.be/", "youtube.com/embed/")}" frameborder="0" allowfullscreen></iframe>` : `<video controls src="${n}" style="max-width: 100%;"></video>`, Z(r);
1343
1905
  }
1344
1906
  }
1345
1907
  };
1346
1908
  }
1347
1909
  //#endregion
1348
1910
  //#region src/components/shared/toolbar/Insert/Components/index.jsx
1349
- function W() {
1350
- return /* @__PURE__ */ c(L, { logic: U() });
1911
+ function me() {
1912
+ return /* @__PURE__ */ c(de, { logic: pe() });
1351
1913
  }
1352
1914
  //#endregion
1353
1915
  //#region src/components/shared/toolbar/View/Components/ViewToolbar.jsx
1354
- function G({ logic: e }) {
1355
- let { toggleFullscreen: t, toggleCodeView: n, showHelp: r } = e;
1916
+ function he({ logic: e }) {
1917
+ let { toggleFullscreen: t, toggleCodeView: n, showHelp: r } = e, i = "forge-toolbar-button group relative flex h-8 cursor-pointer items-center justify-center rounded-[2px] border border-[#ccc] bg-white px-2 text-sm leading-none transition-all duration-150 hover:bg-[#f0f0f0] active:translate-y-px", a = "pointer-events-none absolute left-1/2 top-[calc(100%+8px)] z-30 -translate-x-1/2 whitespace-nowrap rounded-md border border-[#2c2c2c] bg-[#1e1e1e] px-2.5 py-1 text-[11px] font-medium leading-none text-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100 rtl:left-1/2 rtl:-translate-x-1/2 before:absolute before:bottom-full before:left-1/2 before:-translate-x-1/2 before:border-x-[5px] before:border-b-[5px] before:border-t-0 before:border-solid before:border-x-transparent before:border-b-[#2c2c2c] after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:translate-y-[1px] after:border-x-[4px] after:border-b-[4px] after:border-t-0 after:border-solid after:border-x-transparent after:border-b-[#1e1e1e]";
1356
1918
  return /* @__PURE__ */ c("div", {
1357
- className: "forge-toolbar-group forge-toolbar-view",
1919
+ className: "forge-toolbar-group forge-toolbar-view flex items-center gap-0.5",
1358
1920
  children: [/* @__PURE__ */ c("button", {
1359
1921
  type: "button",
1360
- className: "forge-toolbar-button",
1922
+ className: i,
1361
1923
  onClick: t,
1362
1924
  "aria-label": "Full Screen",
1363
1925
  children: [/* @__PURE__ */ c("span", {
1364
1926
  className: "forge-toolbar-icon",
1365
1927
  children: "⛶"
1366
1928
  }), /* @__PURE__ */ c("span", {
1367
- className: "forge-tooltip",
1929
+ className: a,
1368
1930
  "data-i18n": "fullscreen",
1369
1931
  children: "Full Screen"
1370
1932
  })]
1371
1933
  }), /* @__PURE__ */ c("button", {
1372
1934
  type: "button",
1373
- className: "forge-toolbar-button",
1935
+ className: i,
1374
1936
  onClick: n,
1375
1937
  "aria-label": "Code View",
1376
1938
  children: [/* @__PURE__ */ c("span", {
1377
1939
  className: "forge-toolbar-icon",
1378
1940
  children: "</>"
1379
1941
  }), /* @__PURE__ */ c("span", {
1380
- className: "forge-tooltip",
1942
+ className: a,
1381
1943
  "data-i18n": "codeview",
1382
1944
  children: "Code View"
1383
1945
  })]
@@ -1386,7 +1948,7 @@ function G({ logic: e }) {
1386
1948
  }
1387
1949
  //#endregion
1388
1950
  //#region src/components/shared/toolbar/View/Hooks/viewLogic.jsx
1389
- function te() {
1951
+ function ge() {
1390
1952
  return {
1391
1953
  toggleFullscreen: () => {
1392
1954
  let e = document.querySelector(".forge-editor");
@@ -1414,49 +1976,50 @@ function te() {
1414
1976
  }
1415
1977
  //#endregion
1416
1978
  //#region src/components/shared/toolbar/View/Components/index.jsx
1417
- function K() {
1418
- return /* @__PURE__ */ c(G, { logic: te() });
1979
+ function _e() {
1980
+ return /* @__PURE__ */ c(he, { logic: ge() });
1419
1981
  }
1420
1982
  //#endregion
1421
1983
  //#region src/components/shared/toolbar/Index/index.jsx
1422
- function q() {
1984
+ function ve({ editorRef: e }) {
1423
1985
  return /* @__PURE__ */ c("div", {
1424
- className: "forge-editor__toolbar",
1986
+ className: "forge-editor__toolbar sticky top-0 z-10 m-0 flex flex-shrink-0 flex-wrap items-center gap-[4px] rounded-t-[3px] border-b border-[#ddd] bg-[#f5f5f5] p-[5px] text-[#333]",
1425
1987
  role: "toolbar",
1426
1988
  children: [
1427
1989
  /* @__PURE__ */ c(u, {}),
1428
- /* @__PURE__ */ c(p, {}),
1429
1990
  /* @__PURE__ */ c(v, {}),
1430
- /* @__PURE__ */ c(O, {}),
1431
- /* @__PURE__ */ c(A, {}),
1432
- /* @__PURE__ */ c(I, {}),
1433
- /* @__PURE__ */ c(W, {}),
1434
- /* @__PURE__ */ c(K, {})
1991
+ /* @__PURE__ */ c(T, { editorRef: e }),
1992
+ /* @__PURE__ */ c(ce, {}),
1993
+ /* @__PURE__ */ c(H, {}),
1994
+ /* @__PURE__ */ c(ue, {}),
1995
+ /* @__PURE__ */ c(me, {}),
1996
+ /* @__PURE__ */ c(_e, {})
1435
1997
  ]
1436
1998
  });
1437
1999
  }
1438
2000
  //#endregion
1439
2001
  //#region src/components/shared/statusbar/Components/index.jsx
1440
- function J() {
2002
+ function ye() {
1441
2003
  return /* @__PURE__ */ c("div", {
1442
- className: "forge-statusbar",
2004
+ className: "forge-statusbar box-border flex h-2.5 w-full flex-shrink-0 cursor-s-resize items-center justify-center rounded-b-[3px] border-t border-[#ccc] bg-[#f0f0f0]",
1443
2005
  role: "status",
1444
2006
  children: /* @__PURE__ */ c("div", {
1445
- className: "forge-resizebar",
2007
+ className: "flex flex-col items-center gap-px",
1446
2008
  "aria-label": "resize",
1447
2009
  children: [
1448
- /* @__PURE__ */ c("div", { className: "forge-icon-bar" }),
1449
- /* @__PURE__ */ c("div", { className: "forge-icon-bar" }),
1450
- /* @__PURE__ */ c("div", { className: "forge-icon-bar" })
2010
+ /* @__PURE__ */ c("div", { className: "h-px w-3 rounded-[1px] bg-[#888]" }),
2011
+ /* @__PURE__ */ c("div", { className: "h-px w-3 rounded-[1px] bg-[#888]" }),
2012
+ /* @__PURE__ */ c("div", { className: "h-px w-3 rounded-[1px] bg-[#888]" })
1451
2013
  ]
1452
2014
  })
1453
2015
  });
1454
2016
  }
1455
2017
  //#endregion
1456
2018
  //#region src/components/shared/statusbar/Hooks/resize.js
1457
- var Y = 100;
1458
- function X(e, t, n = {}) {
1459
- let r = n.minHeight ?? Y, i = n.maxHeight ?? Infinity, a = 0, o = 0;
2019
+ var be = 100;
2020
+ function xe(e, t, n = {}) {
2021
+ if (!e || !t) return () => {};
2022
+ let r = n.minHeight ?? be, i = n.maxHeight ?? Infinity, a = 0, o = 0;
1460
2023
  function s(e) {
1461
2024
  let n = e.clientY - a, s = o + n;
1462
2025
  s = Math.min(Math.max(s, r), i), t.style.height = `${s}px`;
@@ -1473,19 +2036,30 @@ function X(e, t, n = {}) {
1473
2036
  }
1474
2037
  //#endregion
1475
2038
  //#region src/components/shared/toolbar/Style/Hooks/styleLogic.jsx
1476
- function Z(e) {
1477
- let t = e.querySelector("[data-command='style']"), n = e.querySelector(".forge-dropdown-style");
1478
- if (!t || !n) {
1479
- console.warn("Style toolbar elements not found", e);
1480
- return;
2039
+ function Se(e) {
2040
+ let t = window.getSelection();
2041
+ if (!t || !t.rangeCount) return;
2042
+ let n = t.getRangeAt(0).commonAncestorContainer;
2043
+ n.nodeType === 3 && (n = n.parentElement);
2044
+ let r = n.closest("p, h1, h2, h3, h4, h5, h6, blockquote, pre");
2045
+ if (r) {
2046
+ let n = document.createElement(e);
2047
+ for (; r.firstChild;) n.appendChild(r.firstChild);
2048
+ r.replaceWith(n);
2049
+ let i = document.createRange();
2050
+ i.selectNodeContents(n), i.collapse(!1), t.removeAllRanges(), t.addRange(i);
1481
2051
  }
1482
- m(t, n), n.querySelectorAll(".forge-dropdown-item").forEach((e) => {
1483
- e.addEventListener("click", (t) => {
1484
- t.preventDefault();
1485
- let r = e.dataset.value;
1486
- r && document.execCommand("formatBlock", !1, r), n.classList.remove("open");
2052
+ }
2053
+ function Ce(e) {
2054
+ if (!e) return;
2055
+ let t = e.querySelector("[data-command='style']"), n = e.querySelector(".forge-dropdown-style");
2056
+ !t || !n || (x(t, n), n.querySelectorAll(".forge-dropdown-item").forEach((e) => {
2057
+ e.addEventListener("mousedown", (r) => {
2058
+ r.preventDefault(), r.stopPropagation();
2059
+ let i = e.dataset.value || e.getAttribute("data-value");
2060
+ i && Se(i), n.classList.remove("is-open"), t.classList.remove("is-active");
1487
2061
  });
1488
- });
2062
+ }));
1489
2063
  }
1490
2064
  //#endregion
1491
2065
  //#region src/components/shared/i18n/index.js
@@ -1563,140 +2137,168 @@ var Q = {
1563
2137
  help: "مساعدة"
1564
2138
  }
1565
2139
  }, $ = "en";
1566
- function ne(e, t) {
2140
+ function we(e, t) {
1567
2141
  return (Q[e] || Q[$])[t] || Q[$][t] || t;
1568
2142
  }
1569
2143
  //#endregion
1570
2144
  //#region src/components/shared/i18n/apply.js
1571
- function re(e, t) {
2145
+ function Te(e, t) {
1572
2146
  e.querySelectorAll("[data-i18n]").forEach((e) => {
1573
- e.textContent = ne(t, e.getAttribute("data-i18n"));
2147
+ e.textContent = we(t, e.getAttribute("data-i18n"));
1574
2148
  });
1575
2149
  }
1576
2150
  //#endregion
1577
2151
  //#region src/components/shared/toolbar/Style/Utils/ensureParagraph.jsx
1578
- function ie(e) {
2152
+ function Ee(e) {
1579
2153
  if (e && !(e.children.length > 0 || e.textContent.trim().length > 0)) {
1580
2154
  let t = document.createElement("p");
1581
2155
  t.innerHTML = "<br>", e.appendChild(t);
1582
2156
  }
1583
2157
  }
1584
2158
  //#endregion
2159
+ //#region src/components/shared/toolbar/Hooks/contentClick.js
2160
+ function De(e) {
2161
+ e.addEventListener("click", (t) => {
2162
+ if (t.target === e) {
2163
+ let t = window.getSelection();
2164
+ if (!t) return;
2165
+ let n = e.lastElementChild;
2166
+ if (!n || n.tagName === "PRE" || n.tagName === "BLOCKQUOTE" || /^H[1-6]$/.test(n.tagName)) {
2167
+ let n = document.createElement("p");
2168
+ n.innerHTML = "<br>", e.appendChild(n);
2169
+ let r = document.createRange();
2170
+ r.setStart(n, 0), r.collapse(!0), t.removeAllRanges(), t.addRange(r);
2171
+ }
2172
+ }
2173
+ });
2174
+ }
2175
+ //#endregion
1585
2176
  //#region src/components/shared/toolbar/ImagePopover/Components/ImagePopover.jsx
1586
- function ae({ target: e, onClose: t, onResize: n, onFloat: i, onRemove: a }) {
2177
+ function Oe({ target: e, onClose: t, onResize: n, onFloat: i, onRemove: a }) {
1587
2178
  let o = r(null);
1588
2179
  if (!e) return null;
1589
- let s = e.getBoundingClientRect();
2180
+ let s = e.getBoundingClientRect(), l = {
2181
+ left: s.left + s.width / 2 - 100 + "px",
2182
+ top: s.bottom + 10 + "px"
2183
+ }, u = "note-btn cursor-pointer rounded-[2px] border border-[#ccc] bg-[#f5f5f5] px-2 py-1 text-xs leading-[1.4] transition-all duration-100 ease-in-out hover:border-[#999] hover:bg-[#e6e6e6] active:translate-y-px active:bg-[#d0d0d0]", d = "note-btn-group flex gap-0.5 border-r border-[#ddd] pr-1 last:border-r-0 last:pr-0", f = "not-italic text-sm leading-none";
1590
2184
  return /* @__PURE__ */ c("div", {
1591
2185
  ref: o,
1592
- className: "note-popover bottom note-image-popover",
1593
- style: {
1594
- display: "block",
1595
- left: s.left + s.width / 2 - 100 + "px",
1596
- top: s.bottom + 10 + "px",
1597
- position: "fixed",
1598
- zIndex: 9999
1599
- },
1600
- children: [/* @__PURE__ */ c("div", { className: "note-popover-arrow" }), /* @__PURE__ */ c("div", {
1601
- className: "popover-content note-children-container",
2186
+ className: "note-popover bottom note-image-popover fixed z-[9999] min-w-[200px] rounded-[4px] border border-[#ccc] bg-white p-1.5 shadow-[0_2px_8px_rgba(0,0,0,0.15)]",
2187
+ style: l,
2188
+ children: [/* @__PURE__ */ c("div", {
2189
+ className: "absolute -top-2 left-1/2 -translate-x-1/2",
2190
+ children: [/* @__PURE__ */ c("div", { className: "border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-[#ccc]" }), /* @__PURE__ */ c("div", { className: "absolute top-[1px] left-[-7px] border-l-7 border-r-7 border-b-7 border-l-transparent border-r-transparent border-b-white" })]
2191
+ }), /* @__PURE__ */ c("div", {
2192
+ className: "popover-content note-children-container flex flex-wrap items-center gap-1",
1602
2193
  children: [
1603
2194
  /* @__PURE__ */ c("div", {
1604
- className: "note-btn-group note-resize",
2195
+ className: `${d} note-resize`,
1605
2196
  children: [
1606
2197
  /* @__PURE__ */ c("button", {
1607
2198
  type: "button",
1608
- className: "note-btn",
2199
+ className: u,
1609
2200
  tabIndex: "-1",
1610
2201
  "aria-label": "Resize full",
1611
2202
  onClick: () => n(e, 1),
1612
2203
  children: /* @__PURE__ */ c("span", {
1613
- className: "note-fontsize-10",
2204
+ className: "note-fontsize-10 text-[10px]",
1614
2205
  children: "100%"
1615
2206
  })
1616
2207
  }),
1617
2208
  /* @__PURE__ */ c("button", {
1618
2209
  type: "button",
1619
- className: "note-btn",
2210
+ className: u,
1620
2211
  tabIndex: "-1",
1621
2212
  "aria-label": "Resize half",
1622
2213
  onClick: () => n(e, .5),
1623
2214
  children: /* @__PURE__ */ c("span", {
1624
- className: "note-fontsize-10",
2215
+ className: "note-fontsize-10 text-[10px]",
1625
2216
  children: "50%"
1626
2217
  })
1627
2218
  }),
1628
2219
  /* @__PURE__ */ c("button", {
1629
2220
  type: "button",
1630
- className: "note-btn",
2221
+ className: u,
1631
2222
  tabIndex: "-1",
1632
2223
  "aria-label": "Resize quarter",
1633
2224
  onClick: () => n(e, .25),
1634
2225
  children: /* @__PURE__ */ c("span", {
1635
- className: "note-fontsize-10",
2226
+ className: "note-fontsize-10 text-[10px]",
1636
2227
  children: "25%"
1637
2228
  })
1638
2229
  }),
1639
2230
  /* @__PURE__ */ c("button", {
1640
2231
  type: "button",
1641
- className: "note-btn",
2232
+ className: u,
1642
2233
  tabIndex: "-1",
1643
2234
  "aria-label": "Original size",
1644
2235
  onClick: () => n(e, "original"),
1645
2236
  children: /* @__PURE__ */ c("i", {
1646
- className: "note-icon-rollback",
2237
+ className: `note-icon-rollback ${f}`,
1647
2238
  children: "↺"
1648
2239
  })
1649
2240
  })
1650
2241
  ]
1651
2242
  }),
1652
2243
  /* @__PURE__ */ c("div", {
1653
- className: "note-btn-group note-float",
2244
+ className: `${d} note-float`,
1654
2245
  children: [
1655
2246
  /* @__PURE__ */ c("button", {
1656
2247
  type: "button",
1657
- className: "note-btn",
2248
+ className: u,
1658
2249
  tabIndex: "-1",
1659
2250
  "aria-label": "Float Left",
1660
2251
  onClick: () => i(e, "left"),
1661
2252
  children: /* @__PURE__ */ c("i", {
1662
- className: "note-icon-float-left",
2253
+ className: `note-icon-float-left ${f}`,
1663
2254
  children: "◀"
1664
2255
  })
1665
2256
  }),
1666
2257
  /* @__PURE__ */ c("button", {
1667
2258
  type: "button",
1668
- className: "note-btn",
2259
+ className: u,
2260
+ tabIndex: "-1",
2261
+ "aria-label": "Center",
2262
+ onClick: () => i(e, "center"),
2263
+ children: /* @__PURE__ */ c("i", {
2264
+ className: `note-icon-float-center ${f}`,
2265
+ children: "↔"
2266
+ })
2267
+ }),
2268
+ /* @__PURE__ */ c("button", {
2269
+ type: "button",
2270
+ className: u,
1669
2271
  tabIndex: "-1",
1670
2272
  "aria-label": "Float Right",
1671
2273
  onClick: () => i(e, "right"),
1672
2274
  children: /* @__PURE__ */ c("i", {
1673
- className: "note-icon-float-right",
2275
+ className: `note-icon-float-right ${f}`,
1674
2276
  children: "▶"
1675
2277
  })
1676
2278
  }),
1677
2279
  /* @__PURE__ */ c("button", {
1678
2280
  type: "button",
1679
- className: "note-btn",
2281
+ className: u,
1680
2282
  tabIndex: "-1",
1681
2283
  "aria-label": "Remove float",
1682
2284
  onClick: () => i(e, "none"),
1683
2285
  children: /* @__PURE__ */ c("i", {
1684
- className: "note-icon-rollback",
2286
+ className: `note-icon-rollback ${f}`,
1685
2287
  children: "↺"
1686
2288
  })
1687
2289
  })
1688
2290
  ]
1689
2291
  }),
1690
2292
  /* @__PURE__ */ c("div", {
1691
- className: "note-btn-group note-remove",
2293
+ className: `${d} note-remove`,
1692
2294
  children: /* @__PURE__ */ c("button", {
1693
2295
  type: "button",
1694
- className: "note-btn",
2296
+ className: u,
1695
2297
  tabIndex: "-1",
1696
2298
  "aria-label": "Remove Image",
1697
2299
  onClick: () => a(e),
1698
2300
  children: /* @__PURE__ */ c("i", {
1699
- className: "note-icon-trash",
2301
+ className: `note-icon-trash ${f}`,
1700
2302
  children: "🗑"
1701
2303
  })
1702
2304
  })
@@ -1707,7 +2309,7 @@ function ae({ target: e, onClose: t, onResize: n, onFloat: i, onRemove: a }) {
1707
2309
  }
1708
2310
  //#endregion
1709
2311
  //#region src/components/shared/toolbar/ImagePopover/Hooks/useImagePopover.jsx
1710
- function oe() {
2312
+ function ke() {
1711
2313
  let [e, t] = i(null), [r, a] = i(!1);
1712
2314
  return n(() => {
1713
2315
  let e = (e) => {
@@ -1733,7 +2335,7 @@ function oe() {
1733
2335
  a(!1), t(null);
1734
2336
  },
1735
2337
  onFloat: (e, n) => {
1736
- n === "none" ? (e.style.float = "", e.style.margin = "") : (e.style.float = n, e.style.margin = n === "left" ? "0 10px 5px 0" : "0 0 5px 10px"), a(!1), t(null);
2338
+ n === "none" ? (e.style.float = "", e.style.margin = "", e.style.display = "") : n === "center" ? (e.style.float = "none", e.style.display = "block", e.style.margin = "0 auto") : (e.style.float = n, e.style.display = "", e.style.margin = n === "left" ? "0 10px 5px 0" : "0 0 5px 10px"), a(!1), t(null);
1737
2339
  },
1738
2340
  onRemove: (e) => {
1739
2341
  e.parentElement.removeChild(e), a(!1), t(null);
@@ -1742,12 +2344,12 @@ function oe() {
1742
2344
  }
1743
2345
  //#endregion
1744
2346
  //#region src/components/shared/toolbar/ImagePopover/Components/index.jsx
1745
- function se() {
1746
- return /* @__PURE__ */ c(ae, { ...oe() });
2347
+ function Ae() {
2348
+ return /* @__PURE__ */ c(Oe, { ...ke() });
1747
2349
  }
1748
2350
  //#endregion
1749
2351
  //#region src/components/light/index.jsx
1750
- function ce(e) {
2352
+ function je(e) {
1751
2353
  return {
1752
2354
  getHTML() {
1753
2355
  return e.innerHTML;
@@ -1764,35 +2366,41 @@ function ce(e) {
1764
2366
  }
1765
2367
  };
1766
2368
  }
1767
- function le(e) {
1768
- let n = e.lang || "en", r = /* @__PURE__ */ c("div", {
1769
- className: "forge-editor forge-editor--light",
2369
+ function Me(e) {
2370
+ let n = e.lang || "en", r = e.dir || "ltr", i = { current: null }, a = /* @__PURE__ */ c("div", {
2371
+ className: "forge-editor forge-editor--light flex flex-col w-full rounded-[3px] border border-[#ddd] bg-white box-border align-top min-h-[120px]",
1770
2372
  lang: n,
1771
- dir: e.dir || "ltr",
2373
+ dir: r,
1772
2374
  children: [
1773
- /* @__PURE__ */ c(q, {}),
2375
+ /* @__PURE__ */ c(ve, { editorRef: i }),
1774
2376
  /* @__PURE__ */ c("div", {
1775
- className: "forge-editor__content",
2377
+ className: "forge-editor__content flex-1 min-h-[60px] overflow-auto p-[10px] pb-12 outline-none box-border [&_blockquote]:my-2 [&_blockquote]:border-l-4 [&_blockquote]:border-[#ccc] [&_blockquote]:pl-4 [&_blockquote]:italic [&_pre]:bg-[#f4f4f4] [&_pre]:p-2 [&_pre]:rounded [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:text-xl [&_h2]:font-bold [&_h3]:text-lg [&_h3]:font-bold",
1776
2378
  contentEditable: "true",
1777
2379
  "data-placeholder": e.placeholder || ""
1778
2380
  }),
1779
- /* @__PURE__ */ c(J, {}),
1780
- /* @__PURE__ */ c(se, {})
2381
+ /* @__PURE__ */ c(ye, {}),
2382
+ /* @__PURE__ */ c(Ae, {})
1781
2383
  ]
1782
- }), i = document.createElement("div");
1783
- t(r, i);
1784
- let a = i.firstElementChild, o = a.querySelector(".forge-editor__content");
1785
- return ie(o), Z(a.querySelector(".forge-toolbar-style")), re(a.querySelector(".forge-editor__toolbar"), n), X(a.querySelector(".forge-statusbar"), a, { minHeight: 100 }), {
1786
- element: a,
1787
- ...ce(o)
2384
+ }), o = document.createElement("div");
2385
+ t(a, o);
2386
+ let s = o.firstElementChild, l = s.querySelector(".forge-editor__content");
2387
+ i.current = l, Ee(l), De(l);
2388
+ let u = s.querySelector(".forge-toolbar-style");
2389
+ u && Ce(u);
2390
+ let d = s.querySelector(".forge-editor__toolbar");
2391
+ d && Te(d, n);
2392
+ let f = s.querySelector(".forge-statusbar");
2393
+ return f && xe(f, s, { minHeight: 120 }), {
2394
+ element: s,
2395
+ ...je(l)
1788
2396
  };
1789
2397
  }
1790
2398
  //#endregion
1791
2399
  //#region src/main/index.jsx
1792
- function ue(e) {
2400
+ function Ne(e) {
1793
2401
  let t = o(e);
1794
2402
  if (t.type === "light") {
1795
- let { element: n, getHTML: r, setHTML: i, getText: a, getSelection: o } = le(t);
2403
+ let { element: n, getHTML: r, setHTML: i, getText: a, getSelection: o } = Me(t);
1796
2404
  return e.innerHTML = "", e.appendChild(n), n.style.width = t.width, n.style.height = t.height, {
1797
2405
  element: n,
1798
2406
  getHTML: r,
@@ -1804,4 +2412,4 @@ function ue(e) {
1804
2412
  return null;
1805
2413
  }
1806
2414
  //#endregion
1807
- export { ue as default };
2415
+ export { Ne as default };