inconel 0.1.41 → 0.1.42

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -1,73 +1,77 @@
 import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { useId as re, useRef as w, useState as y, useEffect as oe, useCallback as se } from "react";
-import ce from "../FieldFeedback/FieldFeedback.js";
+import { useId as ye, useRef as O, useState as p, useEffect as ge, useCallback as _e } from "react";
+import Ce from "../FieldFeedback/FieldFeedback.js";
 /* empty css                  */
 /* empty css           */
-import { icons as l } from "./icons.js";
-import { sanitizeHtml as b } from "./sanitize.js";
-const ue = [
+import { icons as a } from "./icons.js";
+import { sanitizeHtml as v } from "./sanitize.js";
+const ke = [
   { tag: "p", label: "Paragraf" },
   { tag: "h1", label: "Başlık 1" },
   { tag: "h2", label: "Başlık 2" },
   { tag: "h3", label: "Başlık 3" },
   { tag: "blockquote", label: "Alıntı" }
-], de = [12, 14, 16, 18, 24, 32], me = (r) => new Promise((m, _) => {
-  const a = new FileReader();
-  a.onload = () => m(String(a.result)), a.onerror = () => _(a.error), a.readAsDataURL(r);
+], ve = [12, 14, 16, 18, 24, 32], Ne = /* @__PURE__ */ new Set(["justifyLeft", "justifyCenter", "justifyRight", "justifyFull"]), Se = (m) => new Promise((h, S) => {
+  const o = new FileReader();
+  o.onload = () => h(String(o.result)), o.onerror = () => S(o.error), o.readAsDataURL(m);
 });
-function N({ label: r, onClick: m, disabled: _, active: a, children: L }) {
+function N({ label: m, onClick: h, disabled: S, active: o, children: j }) {
   return /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      className: `inconel-rte__btn${a ? " inconel-is-active" : ""}`,
-      "aria-label": r,
-      title: r,
-      "aria-pressed": a,
-      disabled: _,
-      onMouseDown: (x) => x.preventDefault(),
-      onClick: m,
-      children: L
+      className: `inconel-rte__btn${o ? " inconel-is-active" : ""}`,
+      "aria-label": m,
+      title: m,
+      "aria-pressed": o,
+      disabled: S,
+      onMouseDown: (R) => R.preventDefault(),
+      onClick: h,
+      children: j
     }
   );
 }
-function ke({
-  value: r = "",
-  onChange: m,
-  onBlur: _,
-  label: a,
-  placeholder: L,
-  id: x,
-  disabled: p = !1,
-  required: D,
-  fullWidth: $ = !0,
-  className: K,
-  minHeight: j = 200,
-  onImageUpload: E,
-  onRequestMedia: z,
-  hint: H,
-  errorMessage: k
+function Re({
+  value: m = "",
+  onChange: h,
+  onBlur: S,
+  label: o,
+  placeholder: j,
+  id: R,
+  disabled: y = !1,
+  required: U,
+  fullWidth: ne = !0,
+  className: le,
+  minHeight: A = 200,
+  onImageUpload: G,
+  onRequestMedia: P,
+  hint: $,
+  errorMessage: w
 }) {
-  const Y = re(), C = x ?? `inconel-rte-${Y.replace(/:/g, "")}`, M = `${C}-hint`, I = `${C}-error`, o = w(null), F = w(null), v = w(null), [f, J] = y(!1), [U, G] = y(""), [u, B] = y(null), [O, P] = y(""), [Z, Q] = y({}), [V, R] = y(!r);
-  oe(() => {
-    const e = o.current;
-    if (!e || r === v.current) return;
-    const t = b(r);
-    e.innerHTML !== t && (e.innerHTML = t), v.current = r, R(!e.textContent && !e.querySelector("img"));
-  }, [r, f]);
-  const h = se(() => {
-    const e = o.current;
+  const ae = ye(), T = R ?? `inconel-rte-${ae.replace(/:/g, "")}`, q = `${T}-hint`, W = `${T}-error`, u = O(null), M = O(null), L = O(null), [f, re] = p(!1), [K, Y] = p(""), [s, x] = p(null), [J, Z] = p(""), [ie, oe] = p({}), [se, F] = p(!m), [ce, Q] = p(!1), [C, V] = p({ rows: 3, cols: 3 });
+  ge(() => {
+    const e = u.current;
+    if (!e || m === L.current) return;
+    const t = v(m);
+    e.innerHTML !== t && (e.innerHTML = t), L.current = m, F(!e.textContent && !e.querySelector("img"));
+  }, [m, f]);
+  const g = _e(() => {
+    const e = u.current;
     if (!e) return;
-    const t = !!e.textContent || !!e.querySelector("img"), s = t ? b(e.innerHTML) : "";
-    R(!t), v.current = s, m?.(s);
-  }, [m]), d = () => {
-    const e = window.getSelection(), t = o.current;
-    e && e.rangeCount > 0 && t?.contains(e.getRangeAt(0).commonAncestorContainer) && (F.current = e.getRangeAt(0).cloneRange());
-  }, T = () => {
-    o.current?.focus();
+    const t = !!e.textContent || !!e.querySelector("img"), l = t ? v(e.innerHTML) : "";
+    F(!t), L.current = l, h?.(l);
+  }, [h]), b = () => {
+    const e = window.getSelection(), t = u.current;
+    e && e.rangeCount > 0 && t?.contains(e.getRangeAt(0).commonAncestorContainer) && (M.current = e.getRangeAt(0).cloneRange());
+  }, B = () => {
+    u.current?.focus();
     const e = window.getSelection();
-    e && F.current && (e.removeAllRanges(), e.addRange(F.current));
-  }, A = () => {
+    e && M.current && (e.removeAllRanges(), e.addRange(M.current));
+  }, X = () => {
+    const e = window.getSelection()?.anchorNode, l = (e instanceof Element ? e : e?.parentElement)?.closest("td, th") ?? null;
+    return l && u.current?.contains(l) ? l : null;
+  }, D = () => {
+    Q(!!X());
     const e = (t) => {
       try {
         return document.queryCommandState(t);
@@ -75,7 +79,7 @@ function ke({
         return !1;
       }
     };
-    Q({
+    oe({
       bold: e("bold"),
       italic: e("italic"),
       underline: e("underline"),
@@ -87,45 +91,67 @@ function ke({
       insertUnorderedList: e("insertUnorderedList"),
       insertOrderedList: e("insertOrderedList")
     });
-  }, S = (e, t) => {
-    T(), document.execCommand("styleWithCSS", !1, "true"), document.execCommand(e, !1, t), d(), A(), h();
-  }, X = (e) => {
-    T(), document.execCommand("styleWithCSS", !1, "false"), document.execCommand("fontSize", !1, "7"), o.current?.querySelectorAll('font[size="7"]').forEach((t) => {
-      const s = document.createElement("span");
-      s.style.fontSize = `${e}px`, s.append(...Array.from(t.childNodes)), t.replaceWith(s);
-    }), d(), h();
+  }, E = (e, t) => {
+    B(), document.execCommand("styleWithCSS", !1, Ne.has(e) ? "true" : "false"), document.execCommand(e, !1, t), b(), D(), g();
+  }, de = (e) => {
+    B(), document.execCommand("styleWithCSS", !1, "false"), document.execCommand("fontSize", !1, "7"), u.current?.querySelectorAll('font[size="7"]').forEach((t) => {
+      const l = document.createElement("span");
+      l.style.fontSize = `${e}px`, l.append(...Array.from(t.childNodes)), t.replaceWith(l);
+    }), b(), g();
+  }, ue = (e) => {
+    B();
+    const t = X(), l = t?.parentElement, i = t?.closest("table");
+    if (!t || !l || !i) return;
+    const I = t.cellIndex, te = (d) => {
+      const k = document.createElement(d.tagName);
+      return k.innerHTML = "<br>", k;
+    };
+    if (e === "addRow") {
+      const d = document.createElement("tr");
+      Array.from(l.cells).forEach((k) => d.append(te(k.tagName === "TH" ? document.createElement("td") : k))), l.parentElement?.tagName === "THEAD" ? (i.tBodies[0] ?? i.appendChild(document.createElement("tbody"))).prepend(d) : l.after(d);
+    } else e === "delRow" ? (l.remove(), i.rows.length || i.remove()) : e === "addCol" ? Array.from(i.rows).forEach((d) => d.cells[I]?.after(te(d.cells[I]))) : e === "delCol" ? (Array.from(i.rows).forEach((d) => d.cells[I]?.remove()), Array.from(i.rows).some((d) => d.cells.length) || i.remove()) : i.remove();
+    Q(!1), g();
+  }, me = () => {
+    const e = Math.min(Math.max(C.rows, 1), 20), t = Math.min(Math.max(C.cols, 1), 10), i = `<tr>${"<td><br></td>".repeat(t)}</tr>`.repeat(e);
+    ee(
+      `<table border="1" width="100%" cellspacing="0" cellpadding="6"><tbody>${i}</tbody></table><p><br></p>`
+    ), x(null);
   }, ee = (e) => {
-    T(), document.execCommand("insertHTML", !1, b(e)), d(), h();
-  }, q = (e) => {
-    d(), P(""), B(u === e ? null : e);
-  }, W = () => {
-    const e = O.trim();
-    e && (u === "link" ? (S("createLink", e), o.current?.querySelectorAll("a").forEach((t) => {
+    B(), document.execCommand("insertHTML", !1, v(e)), b(), g();
+  }, H = (e) => {
+    b(), Z(""), x(s === e ? null : e);
+  }, z = () => {
+    if (s === "table") {
+      me();
+      return;
+    }
+    const e = J.trim();
+    e && (s === "link" ? (E("createLink", e), u.current?.querySelectorAll("a").forEach((t) => {
       /^https?:/i.test(t.getAttribute("href") ?? "") && (t.setAttribute("target", "_blank"), t.setAttribute("rel", "noopener noreferrer"));
-    }), h()) : u === "image" && S("insertImage", e), B(null));
-  }, te = async (e) => {
+    }), g()) : s === "image" && E("insertImage", e), x(null));
+  }, fe = async (e) => {
     const t = e.target.files?.[0];
     if (e.target.value = "", !t || !t.type.startsWith("image/")) return;
-    const s = E ? await E(t) : await me(t);
-    S("insertImage", s), B(null);
-  }, ne = (e) => {
+    const l = G ? await G(t) : await Se(t);
+    E("insertImage", l), x(null);
+  }, be = (e) => {
     const t = e.clipboardData.getData("text/html");
-    t && (e.preventDefault(), document.execCommand("insertHTML", !1, b(t)), h());
-  }, le = () => {
+    t && (e.preventDefault(), document.execCommand("insertHTML", !1, v(t)), g());
+  }, pe = () => {
     if (f) {
-      const e = b(U);
-      v.current = null, o.current && (o.current.innerHTML = e), v.current = e, R(!e), m?.(e);
+      const e = v(K);
+      L.current = null, u.current && (u.current.innerHTML = e), L.current = e, F(!e), h?.(e);
     } else
-      G(b(o.current?.innerHTML ?? ""));
-    B(null), J(!f);
-  }, ie = [H && !k ? M : void 0, k ? I : void 0].filter(Boolean).join(" ") || void 0, g = p || f, i = (e, t, s, ae) => /* @__PURE__ */ n(
+      Y(v(u.current?.innerHTML ?? ""));
+    x(null), re(!f);
+  }, he = [$ && !w ? q : void 0, w ? W : void 0].filter(Boolean).join(" ") || void 0, _ = y || f, r = (e, t, l, i) => /* @__PURE__ */ n(
     N,
     {
       label: t,
-      active: Z[e],
-      disabled: g,
-      onClick: () => S(e, ae),
-      children: s
+      active: ie[e],
+      disabled: _,
+      onClick: () => E(e, i),
+      children: l
     }
   );
   return /* @__PURE__ */ c(
@@ -133,42 +159,42 @@ function ke({
     {
       className: [
         "inconel-field",
-        $ ? "inconel-field--full-width" : "",
-        K ?? ""
+        ne ? "inconel-field--full-width" : "",
+        le ?? ""
       ].join(" "),
       children: [
-        a && /* @__PURE__ */ c("label", { className: "inconel-field__label", htmlFor: C, children: [
-          a,
-          D && /* @__PURE__ */ n("span", { "aria-hidden": "true", children: " *" })
+        o && /* @__PURE__ */ c("label", { className: "inconel-field__label", htmlFor: T, children: [
+          o,
+          U && /* @__PURE__ */ n("span", { "aria-hidden": "true", children: " *" })
         ] }),
         /* @__PURE__ */ c(
           "div",
           {
             className: [
               "inconel-rte",
-              k ? "inconel-is-invalid" : "",
-              p ? "inconel-is-disabled" : ""
+              w ? "inconel-is-invalid" : "",
+              y ? "inconel-is-disabled" : ""
             ].join(" "),
             children: [
               /* @__PURE__ */ c("div", { className: "inconel-rte__toolbar", role: "toolbar", "aria-label": "Biçimlendirme", children: [
-                i("bold", "Kalın", l.bold),
-                i("italic", "İtalik", l.italic),
-                i("underline", "Altı çizili", l.underline),
-                i("strikeThrough", "Üstü çizili", l.strike),
+                r("bold", "Kalın", a.bold),
+                r("italic", "İtalik", a.italic),
+                r("underline", "Altı çizili", a.underline),
+                r("strikeThrough", "Üstü çizili", a.strike),
                 /* @__PURE__ */ n("span", { className: "inconel-rte__sep" }),
                 /* @__PURE__ */ c(
                   "select",
                   {
                     className: "inconel-rte__select",
                     "aria-label": "Biçim",
-                    disabled: g,
+                    disabled: _,
                     value: "",
                     onChange: (e) => {
-                      e.target.value && S("formatBlock", e.target.value);
+                      e.target.value && E("formatBlock", e.target.value);
                     },
                     children: [
                       /* @__PURE__ */ n("option", { value: "", children: "Biçim" }),
-                      ue.map((e) => /* @__PURE__ */ n("option", { value: e.tag, children: e.label }, e.tag))
+                      ke.map((e) => /* @__PURE__ */ n("option", { value: e.tag, children: e.label }, e.tag))
                     ]
                   }
                 ),
@@ -177,14 +203,14 @@ function ke({
                   {
                     className: "inconel-rte__select",
                     "aria-label": "Yazı boyutu",
-                    disabled: g,
+                    disabled: _,
                     value: "",
                     onChange: (e) => {
-                      e.target.value && X(Number(e.target.value));
+                      e.target.value && de(Number(e.target.value));
                     },
                     children: [
                       /* @__PURE__ */ n("option", { value: "", children: "Boyut" }),
-                      de.map((e) => /* @__PURE__ */ c("option", { value: e, children: [
+                      ve.map((e) => /* @__PURE__ */ c("option", { value: e, children: [
                         e,
                         "px"
                       ] }, e))
@@ -192,80 +218,138 @@ function ke({
                   }
                 ),
                 /* @__PURE__ */ n("span", { className: "inconel-rte__sep" }),
-                i("justifyLeft", "Sola hizala", l.alignLeft),
-                i("justifyCenter", "Ortala", l.alignCenter),
-                i("justifyRight", "Sağa hizala", l.alignRight),
-                i("justifyFull", "İki yana yasla", l.alignJustify),
+                r("justifyLeft", "Sola hizala", a.alignLeft),
+                r("justifyCenter", "Ortala", a.alignCenter),
+                r("justifyRight", "Sağa hizala", a.alignRight),
+                r("justifyFull", "İki yana yasla", a.alignJustify),
                 /* @__PURE__ */ n("span", { className: "inconel-rte__sep" }),
-                i("insertUnorderedList", "Madde işaretli liste", l.listUl),
-                i("insertOrderedList", "Numaralı liste", l.listOl),
-                i("outdent", "Girintiyi azalt", l.outdent),
-                i("indent", "Girintiyi artır", l.indent),
-                i("removeFormat", "Biçimi temizle", l.clearFormat),
+                r("insertUnorderedList", "Madde işaretli liste", a.listUl),
+                r("insertOrderedList", "Numaralı liste", a.listOl),
+                r("outdent", "Girintiyi azalt", a.outdent),
+                r("indent", "Girintiyi artır", a.indent),
+                r("removeFormat", "Biçimi temizle", a.clearFormat),
                 /* @__PURE__ */ n("span", { className: "inconel-rte__sep" }),
                 /* @__PURE__ */ n(
                   N,
                   {
                     label: "Bağlantı ekle",
-                    disabled: g,
-                    active: u === "link",
-                    onClick: () => q("link"),
-                    children: l.link
+                    disabled: _,
+                    active: s === "link",
+                    onClick: () => H("link"),
+                    children: a.link
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  N,
+                  {
+                    label: "Tablo ekle",
+                    disabled: _,
+                    active: s === "table",
+                    onClick: () => H("table"),
+                    children: a.table
                   }
                 ),
                 /* @__PURE__ */ n(
                   N,
                   {
                     label: "Görsel ekle",
-                    disabled: g,
-                    active: u === "image",
-                    onClick: () => q("image"),
-                    children: l.image
+                    disabled: _,
+                    active: s === "image",
+                    onClick: () => H("image"),
+                    children: a.image
                   }
                 ),
-                z && /* @__PURE__ */ n(
+                P && /* @__PURE__ */ n(
                   N,
                   {
                     label: "Medya galerisi",
-                    disabled: g,
+                    disabled: _,
                     onClick: () => {
-                      d(), z(ee);
+                      b(), P(ee);
                     },
-                    children: l.gallery
+                    children: a.gallery
                   }
                 ),
                 /* @__PURE__ */ n("span", { className: "inconel-rte__sep" }),
-                i("undo", "Geri al", l.undo),
-                i("redo", "Yinele", l.redo),
+                r("undo", "Geri al", a.undo),
+                r("redo", "Yinele", a.redo),
                 /* @__PURE__ */ n(
                   N,
                   {
                     label: "HTML kaynağı",
-                    disabled: p,
+                    disabled: y,
                     active: f,
-                    onClick: le,
-                    children: l.code
+                    onClick: pe,
+                    children: a.code
                   }
                 )
               ] }),
-              u && !f && /* @__PURE__ */ c("div", { className: "inconel-rte__panel", children: [
+              s === "table" && !f && /* @__PURE__ */ c("div", { className: "inconel-rte__panel", children: [
+                /* @__PURE__ */ c("label", { className: "inconel-rte__field", children: [
+                  "Satır",
+                  /* @__PURE__ */ n(
+                    "input",
+                    {
+                      type: "number",
+                      min: 1,
+                      max: 20,
+                      className: "inconel-rte__input inconel-rte__input--num",
+                      value: C.rows,
+                      onChange: (e) => V({ ...C, rows: Number(e.target.value) })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ c("label", { className: "inconel-rte__field", children: [
+                  "Sütun",
+                  /* @__PURE__ */ n(
+                    "input",
+                    {
+                      type: "number",
+                      min: 1,
+                      max: 10,
+                      className: "inconel-rte__input inconel-rte__input--num",
+                      value: C.cols,
+                      onChange: (e) => V({ ...C, cols: Number(e.target.value) })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ n("button", { type: "button", className: "inconel-rte__action", onClick: z, children: "Tablo ekle" })
+              ] }),
+              ce && !f && !y && /* @__PURE__ */ n("div", { className: "inconel-rte__panel", role: "toolbar", "aria-label": "Tablo", children: [
+                ["addRow", "Satır ekle"],
+                ["delRow", "Satırı sil"],
+                ["addCol", "Sütun ekle"],
+                ["delCol", "Sütunu sil"],
+                ["delTable", "Tabloyu sil"]
+              ].map(([e, t]) => /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  className: "inconel-rte__action",
+                  onMouseDown: (l) => l.preventDefault(),
+                  onClick: () => ue(e),
+                  children: t
+                },
+                e
+              )) }),
+              s && s !== "table" && !f && /* @__PURE__ */ c("div", { className: "inconel-rte__panel", children: [
                 /* @__PURE__ */ n(
                   "input",
                   {
                     type: "url",
                     className: "inconel-rte__input",
-                    "aria-label": u === "link" ? "Bağlantı adresi" : "Görsel adresi",
-                    placeholder: u === "link" ? "https://…" : "Görsel URL (https://…)",
-                    value: O,
+                    "aria-label": s === "link" ? "Bağlantı adresi" : "Görsel adresi",
+                    placeholder: s === "link" ? "https://…" : "Görsel URL (https://…)",
+                    value: J,
                     autoFocus: !0,
-                    onChange: (e) => P(e.target.value),
+                    onChange: (e) => Z(e.target.value),
                     onKeyDown: (e) => {
-                      e.key === "Enter" && (e.preventDefault(), W());
+                      e.key === "Enter" && (e.preventDefault(), z());
                     }
                   }
                 ),
-                /* @__PURE__ */ n("button", { type: "button", className: "inconel-rte__action", onClick: W, children: "Ekle" }),
-                u === "image" && /* @__PURE__ */ c("label", { className: "inconel-rte__action", children: [
+                /* @__PURE__ */ n("button", { type: "button", className: "inconel-rte__action", onClick: z, children: "Ekle" }),
+                s === "image" && /* @__PURE__ */ c("label", { className: "inconel-rte__action", children: [
                   "Dosya seç",
                   /* @__PURE__ */ n(
                     "input",
@@ -274,7 +358,7 @@ function ke({
                       accept: "image/*",
                       hidden: !0,
                       "aria-label": "Görsel dosyası",
-                      onChange: te
+                      onChange: fe
                     }
                   )
                 ] })
@@ -282,43 +366,43 @@ function ke({
               f ? /* @__PURE__ */ n(
                 "textarea",
                 {
-                  id: C,
+                  id: T,
                   className: "inconel-rte__source",
-                  style: { minHeight: j },
-                  "aria-label": a ?? "HTML kaynağı",
-                  value: U,
-                  disabled: p,
+                  style: { minHeight: A },
+                  "aria-label": o ?? "HTML kaynağı",
+                  value: K,
+                  disabled: y,
                   spellCheck: !1,
-                  onChange: (e) => G(e.target.value)
+                  onChange: (e) => Y(e.target.value)
                 }
-              ) : /* @__PURE__ */ c("div", { className: "inconel-rte__surface", style: { minHeight: j }, children: [
-                V && L && /* @__PURE__ */ n("span", { className: "inconel-rte__placeholder", "aria-hidden": "true", children: L }),
+              ) : /* @__PURE__ */ c("div", { className: "inconel-rte__surface", style: { minHeight: A }, children: [
+                se && j && /* @__PURE__ */ n("span", { className: "inconel-rte__placeholder", "aria-hidden": "true", children: j }),
                 /* @__PURE__ */ n(
                   "div",
                   {
-                    ref: o,
-                    id: C,
+                    ref: u,
+                    id: T,
                     className: "inconel-rte__content",
                     role: "textbox",
                     "aria-multiline": "true",
-                    "aria-label": a,
-                    "aria-required": D,
-                    "aria-invalid": !!k,
-                    "aria-describedby": ie,
-                    "aria-disabled": p,
-                    contentEditable: !p,
+                    "aria-label": o,
+                    "aria-required": U,
+                    "aria-invalid": !!w,
+                    "aria-describedby": he,
+                    "aria-disabled": y,
+                    contentEditable: !y,
                     suppressContentEditableWarning: !0,
-                    style: { minHeight: j },
-                    onInput: h,
-                    onPaste: ne,
+                    style: { minHeight: A },
+                    onInput: g,
+                    onPaste: be,
                     onKeyUp: () => {
-                      d(), A();
+                      b(), D();
                     },
                     onMouseUp: () => {
-                      d(), A();
+                      b(), D();
                     },
                     onBlur: () => {
-                      d(), _?.();
+                      b(), S?.();
                     }
                   }
                 )
@@ -326,12 +410,12 @@ function ke({
             ]
           }
         ),
-        /* @__PURE__ */ n(ce, { hint: H, errorMessage: k, hintId: M, errorId: I })
+        /* @__PURE__ */ n(Ce, { hint: $, errorMessage: w, hintId: q, errorId: W })
       ]
     }
   );
 }
 export {
-  ke as default
+  Re as default
 };
 //# sourceMappingURL=RichTextEditor.js.map