@lax-wp/design-system 0.14.10 → 0.14.13

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 (24) hide show
  1. package/dist/components/forms/md-input/MarkdownPreview.cjs.js +1 -1
  2. package/dist/components/forms/md-input/MarkdownPreview.cjs.js.map +1 -1
  3. package/dist/components/forms/md-input/MarkdownPreview.es.js +31 -25
  4. package/dist/components/forms/md-input/MarkdownPreview.es.js.map +1 -1
  5. package/dist/components/forms/md-input/RichMarkdownInput.cjs.js +1 -3
  6. package/dist/components/forms/md-input/RichMarkdownInput.cjs.js.map +1 -1
  7. package/dist/components/forms/md-input/RichMarkdownInput.d.ts +1 -0
  8. package/dist/components/forms/md-input/RichMarkdownInput.es.js +192 -191
  9. package/dist/components/forms/md-input/RichMarkdownInput.es.js.map +1 -1
  10. package/dist/components/forms/md-input/listEditing.cjs.js +13 -0
  11. package/dist/components/forms/md-input/listEditing.cjs.js.map +1 -0
  12. package/dist/components/forms/md-input/listEditing.d.ts +52 -0
  13. package/dist/components/forms/md-input/listEditing.es.js +65 -0
  14. package/dist/components/forms/md-input/listEditing.es.js.map +1 -0
  15. package/dist/components/forms/md-input/remarkSplitRestartedLists.cjs.js +3 -0
  16. package/dist/components/forms/md-input/remarkSplitRestartedLists.cjs.js.map +1 -0
  17. package/dist/components/forms/md-input/remarkSplitRestartedLists.d.ts +51 -0
  18. package/dist/components/forms/md-input/remarkSplitRestartedLists.es.js +33 -0
  19. package/dist/components/forms/md-input/remarkSplitRestartedLists.es.js.map +1 -0
  20. package/dist/index.cjs.js +1 -1
  21. package/dist/index.d.ts +3 -0
  22. package/dist/index.es.js +229 -224
  23. package/dist/index.es.js.map +1 -1
  24. package/package.json +1 -1
package/dist/components/forms/md-input/RichMarkdownInput.es.js CHANGED
@@ -1,16 +1,17 @@
1
- import { jsxs as t, jsx as e, Fragment as q } from "react/jsx-runtime";
2
- import j from "../../../_virtual/index.es.js";
3
- import { forwardRef as oe, useState as A, useRef as de } from "react";
4
- import { FormatBold as me, FormatItalic as xe, FormatUnderlined as ue, FormatListNumbered as he, FormatListBulleted as fe, OpenInFull as pe, VisibilityOutlined as ge, Edit as we } from "@mui/icons-material";
1
+ import { jsxs as n, jsx as e, Fragment as P } from "react/jsx-runtime";
2
+ import N from "../../../_virtual/index.es.js";
3
+ import { forwardRef as oe, useState as O, useRef as de } from "react";
4
+ import { FormatBold as me, FormatItalic as xe, FormatUnderlined as ue, FormatListNumbered as fe, FormatListBulleted as pe, OpenInFull as he, VisibilityOutlined as ge, Edit as we } from "@mui/icons-material";
5
5
  import { Modal as be } from "../../data-display/modal/Modal.es.js";
6
- import f from "../../button/Button.es.js";
6
+ import x from "../../button/Button.es.js";
7
7
  import { Tabs as Ne } from "../../navigation/tabs/Tabs.es.js";
8
- import { MarkdownPreview as H } from "./MarkdownPreview.es.js";
9
- import U from "../../tooltip/Tooltip.es.js";
10
- import { AnimatePresence as ke, motion as ve } from "framer-motion";
11
- import { Typography as V } from "../../data-display/typography/Typography.es.js";
12
- import { InputLabel as ye } from "../shared/InputLabel.es.js";
13
- const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__PURE__ */ t(
8
+ import { MarkdownPreview as L } from "./MarkdownPreview.es.js";
9
+ import { toggleList as ve, continueList as ke } from "./listEditing.es.js";
10
+ import q from "../../tooltip/Tooltip.es.js";
11
+ import { AnimatePresence as ye, motion as je } from "framer-motion";
12
+ import { Typography as A } from "../../data-display/typography/Typography.es.js";
13
+ import { InputLabel as Ee } from "../shared/InputLabel.es.js";
14
+ const Fe = ["edit", "preview"], Se = ({ className: h, size: r = 16 }) => /* @__PURE__ */ n(
14
15
  "svg",
15
16
  {
16
17
  width: r,
@@ -21,186 +22,186 @@ const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__P
21
22
  strokeWidth: "2",
22
23
  strokeLinecap: "round",
23
24
  strokeLinejoin: "round",
24
- className: w,
25
+ className: h,
25
26
  children: [
26
27
  /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
27
28
  /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
28
29
  ]
29
30
  }
30
- ), Fe = oe(
31
+ ), _e = oe(
31
32
  ({
32
- id: w,
33
+ id: h,
33
34
  value: r = "",
34
- defaultValue: W,
35
- onChange: b,
36
- placeholder: D = "Enter markdown content...",
37
- minRows: G = 4,
38
- maxRows: J = 20,
39
- isDisabled: c = !1,
40
- className: Q,
41
- textareaClassName: X,
42
- previewClassName: S,
43
- label: C,
44
- labelClassName: Y,
45
- isRequiredConditional: Z,
46
- required: z = !1,
47
- showPreviewOnModal: ee = !1,
48
- maxLength: p,
49
- linkTarget: R = "_blank",
50
- errorMessage: F,
51
- tooltip: $,
52
- originalCase: I,
53
- suffixIcon: N,
54
- isClearable: _,
55
- inputref: T,
56
- showFormattingHelp: te = !0,
57
- onKeyDown: ne,
58
- noIndent: L = !1,
59
- showMinimalPreview: B = !1,
60
- acceptAdvanceContent: k = !0
61
- }, u) => {
62
- const [o, ae] = A("edit"), [re, M] = A(!1), v = de(null), l = w || `rich-md-input-${Math.random().toString(36).slice(2, 11)}`, le = r.length, d = (n, i = "", g = "") => {
63
- const m = u?.current || v.current;
64
- if (!m) return;
65
- const s = m.selectionStart, x = m.selectionEnd, h = r.substring(s, x), y = h || g, E = r.substring(0, s) + n + y + i + r.substring(x);
66
- b(E), setTimeout(() => {
67
- const a = s + n.length + (h ? h.length : 0);
68
- m.focus(), m.setSelectionRange(a, a + (h ? 0 : g.length));
35
+ defaultValue: H,
36
+ onChange: u,
37
+ placeholder: U = "Enter markdown content...",
38
+ minRows: V = 4,
39
+ maxRows: D = 20,
40
+ isDisabled: s = !1,
41
+ className: W,
42
+ textareaClassName: G,
43
+ previewClassName: E,
44
+ label: v,
45
+ labelClassName: J,
46
+ isRequiredConditional: Q,
47
+ required: F = !1,
48
+ showPreviewOnModal: X = !1,
49
+ maxLength: l,
50
+ linkTarget: S = "_blank",
51
+ errorMessage: k,
52
+ tooltip: _,
53
+ originalCase: C,
54
+ suffixIcon: g,
55
+ isClearable: y,
56
+ inputref: R,
57
+ showFormattingHelp: Y = !0,
58
+ onKeyDown: Z,
59
+ noIndent: z = !1,
60
+ showMinimalPreview: T = !1,
61
+ acceptAdvanceContent: w = !0
62
+ }, c) => {
63
+ const [o, ee] = O("edit"), [te, $] = O(!1), f = de(null), i = h || `rich-md-input-${Math.random().toString(36).slice(2, 11)}`, ne = r.length, d = (t, a = "", m = "") => {
64
+ const p = c?.current || f.current;
65
+ if (!p) return;
66
+ const j = p.selectionStart, K = p.selectionEnd, b = r.substring(j, K), se = b || m, ce = r.substring(0, j) + t + se + a + r.substring(K);
67
+ u(ce), setTimeout(() => {
68
+ const M = j + t.length + (b ? b.length : 0);
69
+ p.focus(), p.setSelectionRange(M, M + (b ? 0 : m.length));
69
70
  }, 0);
70
- }, P = (n) => {
71
- const i = u?.current || v.current;
72
- if (!i) return;
73
- const g = i.selectionStart, m = i.selectionEnd, s = r.split(`
74
- `);
75
- let x = 0, h = 0, y = 0;
76
- for (let a = 0; a < s.length; a++) {
77
- if (x <= g && g <= x + s[a].length + 1 && (h = a), x <= m && m <= x + s[a].length + 1) {
78
- y = a;
79
- break;
80
- }
81
- x += s[a].length + 1;
71
+ }, I = (t) => {
72
+ const a = c?.current || f.current;
73
+ if (!a) return;
74
+ const m = ve(r, a.selectionStart, a.selectionEnd, t);
75
+ l && m.value.length > l || (u(m.value), setTimeout(() => {
76
+ a.focus(), a.setSelectionRange(m.caret, m.caret);
77
+ }, 0));
78
+ }, ae = () => {
79
+ const t = c?.current || f.current;
80
+ if (!t) return !1;
81
+ const a = ke(r, t.selectionStart, t.selectionEnd);
82
+ return !a || l && a.value.length > l ? !1 : (u(a.value), setTimeout(() => {
83
+ t.focus(), t.setSelectionRange(a.caret, a.caret);
84
+ }, 0), !0);
85
+ }, re = (t) => {
86
+ if (Z?.(t), t.key === "Enter" && !t.shiftKey && !t.altKey && !t.metaKey && !t.ctrlKey && !t.defaultPrevented) {
87
+ ae() && t.preventDefault();
88
+ return;
82
89
  }
83
- const E = s.map((a, K) => K >= h && K <= y ? a.trim() === "" ? a : n === "- " && a.trim().startsWith("- ") ? a.replace(/^\s*-\s+/, "") : n.match(/^\d+\.\s/) && a.trim().match(/^\d+\.\s/) ? a.replace(/^\s*\d+\.\s+/, "") : n + a.trim() : a);
84
- b(E.join(`
85
- `)), setTimeout(() => {
86
- i.focus();
87
- }, 0);
88
- }, ie = (n) => {
89
- if (ne?.(n), n.metaKey || n.ctrlKey)
90
- switch (n.key.toLowerCase()) {
90
+ if (t.metaKey || t.ctrlKey)
91
+ switch (t.key.toLowerCase()) {
91
92
  case "b":
92
- n.preventDefault(), d("**", "**", "bold text");
93
+ t.preventDefault(), d("**", "**", "bold text");
93
94
  break;
94
95
  case "i":
95
- n.preventDefault(), d("*", "*", "italic text");
96
+ t.preventDefault(), d("*", "*", "italic text");
96
97
  break;
97
98
  case "u":
98
- n.preventDefault(), d("<u>", "</u>", "underlined text");
99
+ t.preventDefault(), d("<u>", "</u>", "underlined text");
99
100
  break;
100
101
  case "k":
101
- n.preventDefault(), d("[", "](url)", "link text");
102
+ t.preventDefault(), d("[", "](url)", "link text");
102
103
  break;
103
104
  case "e":
104
- n.preventDefault(), d("```", "```", "code");
105
+ t.preventDefault(), d("```", "```", "code");
105
106
  break;
106
107
  }
107
- }, se = () => {
108
- b(""), (u?.current || v.current)?.focus();
109
- }, ce = (() => {
110
- const n = (r.match(/\n/g) || []).length + 1;
111
- return Math.min(J, Math.max(G, n));
112
- })(), O = /* @__PURE__ */ t("div", { className: j("flex flex-col", Q), children: [
113
- /* @__PURE__ */ t("div", { className: `flex flex-row items-center ${C ? "justify-between" : "justify-end"} w-full`, children: [
114
- C && /* @__PURE__ */ e(
108
+ }, le = () => {
109
+ u(""), (c?.current || f.current)?.focus();
110
+ }, ie = (() => {
111
+ const t = (r.match(/\n/g) || []).length + 1;
112
+ return Math.min(D, Math.max(V, t));
113
+ })(), B = /* @__PURE__ */ n("div", { className: N("flex flex-col", W), children: [
114
+ /* @__PURE__ */ n("div", { className: `flex flex-row items-center ${v ? "justify-between" : "justify-end"} w-full`, children: [
115
+ v && /* @__PURE__ */ e(
115
116
  "label",
116
117
  {
117
- id: l,
118
- htmlFor: l,
119
- className: `mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${I ? "" : "capitalize"} ${Y || "!uppercse"}`,
120
- children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-between w-full", children: /* @__PURE__ */ e("div", { className: "inline-flex flex-wrap items-center gap-1", children: /* @__PURE__ */ e(ye, { label: C || "", required: z || !1, isRequiredConditional: Z || !1 }) }) })
118
+ id: i,
119
+ htmlFor: i,
120
+ className: `mb-1 text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${C ? "" : "capitalize"} ${J || "!uppercse"}`,
121
+ children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-between w-full", children: /* @__PURE__ */ e("div", { className: "inline-flex flex-wrap items-center gap-1", children: /* @__PURE__ */ e(Ee, { label: v || "", required: F || !1, isRequiredConditional: Q || !1 }) }) })
121
122
  }
122
123
  ),
123
- te && /* @__PURE__ */ e(
124
- U,
124
+ Y && /* @__PURE__ */ e(
125
+ q,
125
126
  {
126
127
  placement: "bottom-end",
127
- title: /* @__PURE__ */ t("div", { className: "flex flex-col items-start justify-center py-2 px-3 min-w-[220px] gap-2 bg-neutral-900 rounded-lg", children: [
128
- /* @__PURE__ */ t("div", { className: "flex flex-col items-start justify-start gap-1 w-full", children: [
129
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
128
+ title: /* @__PURE__ */ n("div", { className: "flex flex-col items-start justify-center py-2 px-3 min-w-[220px] gap-2 bg-neutral-900 rounded-lg", children: [
129
+ /* @__PURE__ */ n("div", { className: "flex flex-col items-start justify-start gap-1 w-full", children: [
130
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
130
131
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
131
132
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "**bold**" }) }),
132
- /* @__PURE__ */ t("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
133
+ /* @__PURE__ */ n("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
133
134
  "→ ",
134
135
  /* @__PURE__ */ e("strong", { children: "bold" }),
135
136
  " text"
136
137
  ] })
137
138
  ] }),
138
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
139
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
139
140
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
140
141
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "*italic*" }) }),
141
- /* @__PURE__ */ t("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
142
+ /* @__PURE__ */ n("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
142
143
  "→ ",
143
144
  /* @__PURE__ */ e("em", { children: "italic" }),
144
145
  " text"
145
146
  ] })
146
147
  ] }),
147
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
148
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
148
149
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
149
150
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "`code`" }) }),
150
- /* @__PURE__ */ t("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
151
+ /* @__PURE__ */ n("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
151
152
  "→ ",
152
153
  /* @__PURE__ */ e("code", { children: "inline code" })
153
154
  ] })
154
155
  ] }),
155
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
156
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
156
157
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
157
158
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "<u>text</u>" }) }),
158
- /* @__PURE__ */ t("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
159
+ /* @__PURE__ */ n("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
159
160
  "→ ",
160
161
  /* @__PURE__ */ e("u", { children: "underline" })
161
162
  ] })
162
163
  ] }),
163
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
164
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
164
165
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
165
166
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "~~strike~~" }) }),
166
- /* @__PURE__ */ t("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
167
+ /* @__PURE__ */ n("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: [
167
168
  "→ ",
168
169
  /* @__PURE__ */ e("del", { children: "strike" })
169
170
  ] })
170
171
  ] }),
171
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
172
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
172
173
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
173
174
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "- item" }) }),
174
175
  /* @__PURE__ */ e("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: "→ bullet list" })
175
176
  ] }),
176
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
177
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
177
178
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
178
179
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "1. item" }) }),
179
180
  /* @__PURE__ */ e("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: "→ numbered list" })
180
181
  ] }),
181
- k && /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
182
+ w && /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
182
183
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
183
184
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "## heading" }) }),
184
185
  /* @__PURE__ */ e("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: "→ heading 2" })
185
186
  ] }),
186
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
187
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
187
188
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
188
189
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "[link](url)" }) }),
189
190
  /* @__PURE__ */ e("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: "→ hyperlink" })
190
191
  ] })
191
192
  ] }),
192
- k && /* @__PURE__ */ e(q, { children: /* @__PURE__ */ t("div", { className: "flex flex-col items-start justify-start gap-1 w-full", children: [
193
- /* @__PURE__ */ t("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
193
+ w && /* @__PURE__ */ e(P, { children: /* @__PURE__ */ n("div", { className: "flex flex-col items-start justify-start gap-1 w-full", children: [
194
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-start gap-1 ml-1", children: [
194
195
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
195
196
  /* @__PURE__ */ e("div", { className: "flex flex-row justify-center items-center px-[3px] bg-neutral-700 rounded-sm", children: /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter", children: "> quote" }) }),
196
197
  /* @__PURE__ */ e("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: "→ blockquote" })
197
198
  ] }),
198
- /* @__PURE__ */ t("div", { className: "flex flex-col items-start justify-start gap-0.5 w-full mt-0.5", children: [
199
- /* @__PURE__ */ t("div", { className: "flex flex-row items-center gap-1 ml-1", children: [
199
+ /* @__PURE__ */ n("div", { className: "flex flex-col items-start justify-start gap-0.5 w-full mt-0.5", children: [
200
+ /* @__PURE__ */ n("div", { className: "flex flex-row items-center gap-1 ml-1", children: [
200
201
  /* @__PURE__ */ e("span", { className: "text-white text-[18px] leading-4", children: "•" }),
201
202
  /* @__PURE__ */ e("span", { className: "text-white text-xs font-medium leading-4 font-inter", children: "Table:" })
202
203
  ] }),
203
- /* @__PURE__ */ t("div", { className: "flex flex-col px-1 py-0.5 bg-neutral-700 ml-2 rounded-sm gap-0", children: [
204
+ /* @__PURE__ */ n("div", { className: "flex flex-col px-1 py-0.5 bg-neutral-700 ml-2 rounded-sm gap-0", children: [
204
205
  /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap", children: "| Header 1 | Header 2 | Header 3 |" }),
205
206
  /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap", children: "| :--- | :---: | ---: |" }),
206
207
  /* @__PURE__ */ e("span", { className: "text-neutral-300 text-xs font-medium leading-4 font-inter whitespace-nowrap", children: "| Left | Center | Right |" })
@@ -208,25 +209,25 @@ const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__P
208
209
  ] })
209
210
  ] }) })
210
211
  ] }),
211
- children: /* @__PURE__ */ e(V, { className: "mb-2 text-xs font-medium text-primary-700 inline-flex items-center gap-1 cursor-pointer", children: "Formatting help ?" })
212
+ children: /* @__PURE__ */ e(A, { className: "mb-2 text-xs font-medium text-primary-700 inline-flex items-center gap-1 cursor-pointer", children: "Formatting help ?" })
212
213
  }
213
214
  )
214
215
  ] }),
215
- /* @__PURE__ */ t("div", { className: j(
216
+ /* @__PURE__ */ n("div", { className: N(
216
217
  "flex flex-col border shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg bg-white dark:bg-black-700 w-full",
217
- F ? "border-red-300 focus-within:border-red-500 focus-within:shadow-[0_0_0_1.5px_var(--color-red-200)]" : "border-[#EAECF0] dark:border-black-600 focus-within:border-primary-600 dark:focus-within:border-primary-400 focus-within:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus-within:shadow-[0_0_0_1.5px_var(--color-primary-950)]"
218
+ k ? "border-red-300 focus-within:border-red-500 focus-within:shadow-[0_0_0_1.5px_var(--color-red-200)]" : "border-[#EAECF0] dark:border-black-600 focus-within:border-primary-600 dark:focus-within:border-primary-400 focus-within:shadow-[0_0_0_1.5px_var(--color-primary-100)] dark:focus-within:shadow-[0_0_0_1.5px_var(--color-primary-950)]"
218
219
  ), children: [
219
- /* @__PURE__ */ t("div", { className: j(
220
+ /* @__PURE__ */ n("div", { className: N(
220
221
  "flex flex-row justify-between items-center px-3 py-2 gap-2 h-11 rounded-t-lg bg-[#F9FAFB] dark:bg-black-600 border-b border-[#EAECF0] dark:border-black-600"
221
222
  ), children: [
222
- /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
223
+ /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
223
224
  /* @__PURE__ */ e(
224
- f,
225
+ x,
225
226
  {
226
- id: `${l}-bold`,
227
+ id: `${i}-bold`,
227
228
  type: "button",
228
229
  onClick: () => d("**", "**", "bold text"),
229
- disabled: c || o === "preview",
230
+ disabled: s || o === "preview",
230
231
  className: "!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",
231
232
  appearance: "ghost",
232
233
  status: "no-background",
@@ -235,12 +236,12 @@ const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__P
235
236
  }
236
237
  ),
237
238
  /* @__PURE__ */ e(
238
- f,
239
+ x,
239
240
  {
240
- id: `${l}-italic`,
241
+ id: `${i}-italic`,
241
242
  type: "button",
242
243
  onClick: () => d("*", "*", "italic text"),
243
- disabled: c || o === "preview",
244
+ disabled: s || o === "preview",
244
245
  className: "!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",
245
246
  appearance: "ghost",
246
247
  status: "no-background",
@@ -249,12 +250,12 @@ const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__P
249
250
  }
250
251
  ),
251
252
  /* @__PURE__ */ e(
252
- f,
253
+ x,
253
254
  {
254
- id: `${l}-underline`,
255
+ id: `${i}-underline`,
255
256
  type: "button",
256
257
  onClick: () => d("<u>", "</u>", "underlined text"),
257
- disabled: c || o === "preview",
258
+ disabled: s || o === "preview",
258
259
  className: "!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",
259
260
  appearance: "ghost",
260
261
  status: "no-background",
@@ -264,63 +265,63 @@ const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__P
264
265
  ),
265
266
  /* @__PURE__ */ e("div", { className: "w-px h-5 bg-[#EAECF0] dark:bg-black-500 rounded-full" }),
266
267
  /* @__PURE__ */ e(
267
- f,
268
+ x,
268
269
  {
269
- id: `${l}-numbered-list`,
270
+ id: `${i}-numbered-list`,
270
271
  type: "button",
271
- onClick: () => P("1. "),
272
- disabled: c || o === "preview",
272
+ onClick: () => I("ordered"),
273
+ disabled: s || o === "preview",
273
274
  className: "!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",
274
275
  appearance: "ghost",
275
276
  status: "no-background",
276
277
  title: "Numbered List",
277
- children: /* @__PURE__ */ e(he, { sx: { fontSize: 20, color: "#667085" }, className: "dark:text-neutral-400" })
278
+ children: /* @__PURE__ */ e(fe, { sx: { fontSize: 20, color: "#667085" }, className: "dark:text-neutral-400" })
278
279
  }
279
280
  ),
280
281
  /* @__PURE__ */ e(
281
- f,
282
+ x,
282
283
  {
283
- id: `${l}-bullet-list`,
284
+ id: `${i}-bullet-list`,
284
285
  type: "button",
285
- onClick: () => P("- "),
286
- disabled: c || o === "preview",
286
+ onClick: () => I("bullet"),
287
+ disabled: s || o === "preview",
287
288
  className: "!p-0.5 !min-w-0 !h-auto !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",
288
289
  appearance: "ghost",
289
290
  status: "no-background",
290
291
  title: "Bullet List",
291
- children: /* @__PURE__ */ e(fe, { sx: { fontSize: 20, color: "#667085" }, className: "dark:text-neutral-400" })
292
+ children: /* @__PURE__ */ e(pe, { sx: { fontSize: 20, color: "#667085" }, className: "dark:text-neutral-400" })
292
293
  }
293
294
  )
294
295
  ] }),
295
- /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
296
- p && /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
297
- /* @__PURE__ */ t("span", { className: "text-sm font-medium text-[#475467] dark:text-neutral-400", children: [
298
- le,
296
+ /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
297
+ l && /* @__PURE__ */ n("div", { className: "flex items-center gap-3", children: [
298
+ /* @__PURE__ */ n("span", { className: "text-sm font-medium text-[#475467] dark:text-neutral-400", children: [
299
+ ne,
299
300
  "/",
300
- p
301
+ l
301
302
  ] }),
302
303
  /* @__PURE__ */ e("div", { className: "w-px h-6 bg-[#EAECF0] dark:bg-black-500 rounded-full" })
303
304
  ] }),
304
- ee ? /* @__PURE__ */ e(
305
- f,
305
+ X ? /* @__PURE__ */ e(
306
+ x,
306
307
  {
307
- id: `${l}-expand`,
308
+ id: `${i}-expand`,
308
309
  type: "button",
309
- onClick: () => M(!0),
310
- disabled: c,
310
+ onClick: () => $(!0),
311
+ disabled: s,
311
312
  className: "!p-0.5 !min-w-0 !h-auto ml-1 !rounded-md hover:!bg-neutral-200 dark:hover:!bg-black-500 hover:!scale-110 !transition-all !duration-200",
312
313
  appearance: "ghost",
313
314
  status: "no-background",
314
315
  title: "Expand Preview",
315
- children: /* @__PURE__ */ e(pe, { sx: { fontSize: 16, color: "#667085" }, className: "dark:text-neutral-400" })
316
+ children: /* @__PURE__ */ e(he, { sx: { fontSize: 16, color: "#667085" }, className: "dark:text-neutral-400" })
316
317
  }
317
318
  ) : /* @__PURE__ */ e(
318
319
  Ne,
319
320
  {
320
321
  variant: "switch",
321
- tabs: je,
322
+ tabs: Fe,
322
323
  activeTab: o,
323
- onTabClick: (n) => ae(n),
324
+ onTabClick: (t) => ee(t),
324
325
  height: "h-5",
325
326
  iconsOnly: !0,
326
327
  tabIcons: {
@@ -332,27 +333,27 @@ const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__P
332
333
  )
333
334
  ] })
334
335
  ] }),
335
- /* @__PURE__ */ e("div", { className: "px-3 py-2 relative", children: o === "edit" ? /* @__PURE__ */ t(q, { children: [
336
+ /* @__PURE__ */ e("div", { className: "px-3 py-2 relative", children: o === "edit" ? /* @__PURE__ */ n(P, { children: [
336
337
  /* @__PURE__ */ e(
337
338
  "textarea",
338
339
  {
339
- ref: (n) => {
340
- typeof u == "function" ? u(n) : u && (u.current = n), v.current = n, T && (T.current = n);
340
+ ref: (t) => {
341
+ typeof c == "function" ? c(t) : c && (c.current = t), f.current = t, R && (R.current = t);
341
342
  },
342
- id: l,
343
+ id: i,
343
344
  value: r,
344
- defaultValue: W,
345
- onChange: (n) => {
346
- const i = n.target.value;
347
- (!p || i.length <= p) && b(i);
345
+ defaultValue: H,
346
+ onChange: (t) => {
347
+ const a = t.target.value;
348
+ (!l || a.length <= l) && u(a);
348
349
  },
349
- onKeyDown: ie,
350
- placeholder: D,
351
- rows: ce,
352
- disabled: c,
353
- required: z,
354
- maxLength: p,
355
- className: j(
350
+ onKeyDown: re,
351
+ placeholder: U,
352
+ rows: ie,
353
+ disabled: s,
354
+ required: F,
355
+ maxLength: l,
356
+ className: N(
356
357
  // Base styles
357
358
  "w-full bg-transparent !focus:ring-0 !focus:border-none",
358
359
  "font-inter font-medium text-sm leading-5",
@@ -366,26 +367,26 @@ const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__P
366
367
  "[scrollbar-width:none]",
367
368
  // Disabled state
368
369
  {
369
- "text-neutral-400 dark:text-neutral-500 cursor-not-allowed": c
370
+ "text-neutral-400 dark:text-neutral-500 cursor-not-allowed": s
370
371
  },
371
372
  // Add padding if suffix icons exist
372
373
  {
373
- "pr-20": _ || N
374
+ "pr-20": y || g
374
375
  },
375
- X
376
+ G
376
377
  )
377
378
  }
378
379
  ),
379
- (_ || N) && o === "edit" && /* @__PURE__ */ t("div", { className: "absolute right-1 top-2 flex items-center gap-1", children: [
380
- _ && r && /* @__PURE__ */ e(
380
+ (y || g) && o === "edit" && /* @__PURE__ */ n("div", { className: "absolute right-1 top-2 flex items-center gap-1", children: [
381
+ y && r && /* @__PURE__ */ e(
381
382
  "button",
382
383
  {
383
- id: `btn-input-field-clear-${w}`,
384
+ id: `btn-input-field-clear-${h}`,
384
385
  className: "absolute inset-y-0 flex items-center cursor-pointer top-2 right-1 focus:outline-none",
385
- onClick: se,
386
+ onClick: le,
386
387
  type: "button",
387
388
  children: /* @__PURE__ */ e(
388
- Ce,
389
+ Se,
389
390
  {
390
391
  className: "text-neutral-300 dark:text-black-500 hover:text-neutral-400 dark:hover:text-black-400 transition-colors",
391
392
  size: 16
@@ -393,66 +394,66 @@ const je = ["edit", "preview"], Ce = ({ className: w, size: r = 16 }) => /* @__P
393
394
  )
394
395
  }
395
396
  ),
396
- N && /* @__PURE__ */ e("div", { className: "flex items-center", children: N })
397
+ g && /* @__PURE__ */ e("div", { className: "flex items-center", children: g })
397
398
  ] })
398
399
  ] }) : /* @__PURE__ */ e("div", { className: "w-full min-h-[92px] max-h-[400px] overflow-y-auto", children: /* @__PURE__ */ e(
399
- H,
400
+ L,
400
401
  {
401
402
  content: r,
402
- linkTarget: R,
403
- className: S,
404
- noIndent: L,
405
- showMinimalPreview: B,
406
- acceptAdvanceContent: k
403
+ linkTarget: S,
404
+ className: E,
405
+ noIndent: z,
406
+ showMinimalPreview: T,
407
+ acceptAdvanceContent: w
407
408
  }
408
409
  ) }) })
409
410
  ] }),
410
411
  /* @__PURE__ */ e(
411
412
  be,
412
413
  {
413
- open: re,
414
- onCancel: () => M(!1),
414
+ open: te,
415
+ onCancel: () => $(!1),
415
416
  title: "Markdown Preview",
416
417
  width: 900,
417
418
  footer: null,
418
419
  children: /* @__PURE__ */ e("div", { className: "max-h-[calc(100vh-200px)] overflow-y-auto p-4", children: /* @__PURE__ */ e(
419
- H,
420
+ L,
420
421
  {
421
422
  content: r,
422
- linkTarget: R,
423
- className: S,
424
- noIndent: L,
425
- showMinimalPreview: B,
426
- acceptAdvanceContent: k
423
+ linkTarget: S,
424
+ className: E,
425
+ noIndent: z,
426
+ showMinimalPreview: T,
427
+ acceptAdvanceContent: w
427
428
  }
428
429
  ) })
429
430
  }
430
431
  ),
431
- /* @__PURE__ */ e(ke, { children: F && /* @__PURE__ */ e(
432
- ve.div,
432
+ /* @__PURE__ */ e(ye, { children: k && /* @__PURE__ */ e(
433
+ je.div,
433
434
  {
434
435
  initial: { opacity: 0, y: -10 },
435
436
  animate: { opacity: 1, y: 0 },
436
437
  exit: { opacity: 0, y: -10 },
437
438
  transition: { duration: 0.2 },
438
439
  children: /* @__PURE__ */ e(
439
- V,
440
+ A,
440
441
  {
441
442
  className: "mt-1 text-error-500",
442
443
  appearance: "custom",
443
444
  size: "extra-small",
444
445
  variant: "medium",
445
- children: F
446
+ children: k
446
447
  }
447
448
  )
448
449
  }
449
450
  ) })
450
451
  ] });
451
- return $ ? /* @__PURE__ */ e(U, { title: $, children: O }) : O;
452
+ return _ ? /* @__PURE__ */ e(q, { title: _, children: B }) : B;
452
453
  }
453
454
  );
454
- Fe.displayName = "RichMarkdownInput";
455
+ _e.displayName = "RichMarkdownInput";
455
456
  export {
456
- Fe as RichMarkdownInput
457
+ _e as RichMarkdownInput
457
458
  };
458
459
  //# sourceMappingURL=RichMarkdownInput.es.js.map