@code0-tech/pictor 0.0.0-mvp.29 → 0.0.0-mvp.30

package/dist/components/form/InputContentEditable.hook.js

@@ -0,0 +1,471 @@
+import { jsx as ee, Fragment as te } from "react/jsx-runtime";
+import { c as ne } from "../../_virtual/compiler-runtime.js";
+import re from "react";
+import { s as oe } from "../../_virtual/server.browser.js";
+import { buildDefaultSyntax as se } from "./Input.syntax.hook.js";
+const I = "input__token", j = "input__token--selected", Q = "title", k = "​", O = (t) => (t ?? "").split(k).join(""), L = (t) => !!t && t.nodeType === Node.TEXT_NODE && (t.textContent ?? "") === k, U = (t) => {
+  try {
+    return JSON.stringify(t);
+  } catch {
+    return JSON.stringify({
+      value: String(t ?? "")
+    });
+  }
+}, ie = (t) => {
+  if (!t) return null;
+  try {
+    return JSON.parse(t);
+  } catch {
+    return null;
+  }
+}, X = (t) => t == null ? "" : typeof t == "string" ? t : U(t), H = (t) => {
+  const e = (t.innerHTML ?? "").trim().toLowerCase();
+  (e === "<br>" || e === "<br/>" || e === "<br />") && (t.innerHTML = ""), t.childNodes.length === 1 && t.childNodes[0]?.tagName === "BR" && (t.innerHTML = "");
+}, S = (t) => t instanceof HTMLElement && t.classList.contains(I), ae = (t) => {
+  let e = t;
+  for (; e; ) {
+    if (S(e)) return !0;
+    e = e.parentNode;
+  }
+  return !1;
+}, ce = (t) => {
+  if (t && typeof t == "object") {
+    const {
+      children: e,
+      __contentHtml: n,
+      ...r
+    } = t;
+    return r;
+  }
+  return {
+    value: t
+  };
+}, P = (t) => ie(t.getAttribute(Q)) ?? {
+  value: t.textContent ?? ""
+}, G = (t, e) => {
+  const n = document.createElement("span");
+  n.setAttribute("contenteditable", "false"), n.className = I;
+  const r = ce(t);
+  if (n.setAttribute(Q, U(r)), e !== void 0)
+    n.innerHTML = e;
+  else {
+    const i = r?.label ?? r?.value ?? "";
+    n.textContent = String(i ?? "");
+  }
+  return n.style.display = "inline-flex", n.style.alignItems = "center", n.style.verticalAlign = "middle", n.style.userSelect = "text", n.style.webkitUserSelect = "text", n;
+}, K = (t) => {
+  const e = window.getSelection();
+  if (e && e.rangeCount > 0) {
+    const i = e.getRangeAt(0);
+    if (t.contains(i.startContainer)) return i;
+  }
+  const n = document.createRange();
+  n.selectNodeContents(t), n.collapse(!1);
+  const r = window.getSelection();
+  return r?.removeAllRanges(), r?.addRange(n), n;
+}, le = (t, e) => {
+  if (!t) return;
+  const n = window.getSelection();
+  if (!n || n.rangeCount === 0) return;
+  const r = n.getRangeAt(0);
+  if (!t.contains(r.startContainer)) return;
+  r.deleteContents();
+  const i = document.createTextNode(e);
+  r.insertNode(i);
+  const u = document.createRange();
+  u.setStartAfter(i), u.collapse(!0), n.removeAllRanges(), n.addRange(u);
+}, de = (t) => {
+  if (!t) return [""];
+  const e = [], n = (r) => {
+    if (r.nodeType === Node.TEXT_NODE) {
+      const u = O(r.textContent ?? "");
+      u.length && e.push(u);
+      return;
+    }
+    if (r.nodeType !== Node.ELEMENT_NODE) return;
+    const i = r;
+    if (S(i)) {
+      e.push(P(i));
+      return;
+    }
+    Array.from(r.childNodes).forEach(n);
+  };
+  return Array.from(t.childNodes).forEach(n), e.length ? e.reduce((r, i) => (typeof i == "string" && typeof r[r.length - 1] == "string" ? r[r.length - 1] = `${r[r.length - 1]}${i}` : r.push(i), r), []) : [""];
+}, ue = (t) => t.map((e) => {
+  if (typeof e == "string") return e;
+  const n = e?.value ?? e;
+  return X(n);
+}).join(""), fe = (t) => {
+  const {
+    children: e,
+    __contentHtml: n,
+    ...r
+  } = t;
+  return r;
+}, z = (t) => {
+  if (!t) return null;
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return null;
+  const n = e.getRangeAt(0);
+  if (!t.contains(n.startContainer)) return null;
+  const r = n.startContainer, i = n.startOffset;
+  let u = null;
+  r.nodeType === Node.ELEMENT_NODE && (u = r.childNodes[i] ?? null);
+  const N = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
+    acceptNode: (o) => o.nodeType === Node.TEXT_NODE ? ae(o) || (o.textContent ?? "") === k ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT : o.nodeType === Node.ELEMENT_NODE && S(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  let f = null, d = N.nextNode();
+  for (; d && !(u && d === u); ) {
+    if (d === r && d.nodeType === Node.TEXT_NODE) {
+      const o = d.textContent?.slice(0, i) ?? "", s = [...O(o).matchAll(/\S+/g)], a = s[s.length - 1];
+      if (a && a.index !== void 0) {
+        const m = a.index, g = m + a[0].length, h = document.createRange();
+        h.setStart(d, Math.min(m, o.length)), h.setEnd(d, Math.min(g, o.length)), f = {
+          token: a[0],
+          range: h
+        };
+      }
+      break;
+    }
+    if (S(d)) {
+      f = null, d = N.nextNode();
+      continue;
+    }
+    if (d.nodeType === Node.TEXT_NODE) {
+      const o = d.textContent ?? "", s = [...O(o).matchAll(/\S+/g)], a = s[s.length - 1];
+      if (a && a.index !== void 0) {
+        const m = a.index, g = m + a[0].length, h = document.createRange();
+        h.setStart(d, Math.min(m, o.length)), h.setEnd(d, Math.min(g, o.length)), f = {
+          token: a[0],
+          range: h
+        };
+      }
+    }
+    d = N.nextNode();
+  }
+  return f;
+}, ge = (t) => {
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return null;
+  const n = e.getRangeAt(0);
+  if (!t.contains(n.startContainer) || !t.contains(n.endContainer)) return null;
+  const r = (f) => {
+    if (f.nodeType === Node.TEXT_NODE) return O(f.textContent ?? "").length;
+    if (f.nodeType === Node.ELEMENT_NODE) {
+      const d = f;
+      if (S(d)) {
+        const c = P(d);
+        return String(c?.value ?? "").length;
+      }
+      let o = 0;
+      return Array.from(f.childNodes).forEach((c) => o += r(c)), o;
+    }
+    return 0;
+  }, i = (f, d) => {
+    let o = 0;
+    const c = (s) => {
+      if (s === f) {
+        if (s.nodeType === Node.TEXT_NODE)
+          return o += O(s.textContent ?? "").slice(0, d).length, !0;
+        if (s.nodeType === Node.ELEMENT_NODE) {
+          const a = Array.from(s.childNodes), m = Math.max(0, Math.min(d, a.length));
+          for (let g = 0; g < m; g++) o += r(a[g]);
+          return !0;
+        }
+        return !0;
+      }
+      if (s.nodeType === Node.TEXT_NODE)
+        return o += O(s.textContent ?? "").length, !1;
+      if (s.nodeType === Node.ELEMENT_NODE) {
+        const a = s;
+        if (S(a)) {
+          const m = P(a);
+          return o += String(m?.value ?? "").length, !1;
+        }
+        for (const m of Array.from(s.childNodes))
+          if (c(m)) return !0;
+      }
+      return !1;
+    };
+    return c(t), o;
+  }, u = i(n.startContainer, n.startOffset), N = i(n.endContainer, n.endOffset);
+  return {
+    start: Math.min(u, N),
+    end: Math.max(u, N)
+  };
+}, pe = (t, e, n) => {
+  const r = (s) => Math.max(0, s), i = r(e), u = r(n), N = (s) => {
+    let a = s;
+    const m = (g) => {
+      if (g.nodeType === Node.TEXT_NODE) {
+        const h = g.textContent ?? "", y = O(h).length;
+        return a <= y ? {
+          node: g,
+          offset: Math.min(a, h.length)
+        } : (a -= y, null);
+      }
+      if (g.nodeType === Node.ELEMENT_NODE) {
+        const h = g;
+        if (S(h)) {
+          const y = P(h), x = String(y?.value ?? "").length, w = h.parentNode ?? t, D = Array.from(w.childNodes).indexOf(h);
+          return a <= 0 ? {
+            node: w,
+            offset: D
+          } : a < x ? {
+            node: w,
+            offset: D + 1
+          } : (a -= x, null);
+        }
+        for (const y of Array.from(g.childNodes)) {
+          const x = m(y);
+          if (x) return x;
+        }
+      }
+      return null;
+    };
+    return m(t) ?? {
+      node: t,
+      offset: t.childNodes.length
+    };
+  }, f = N(i), d = N(u), o = window.getSelection();
+  if (!o) return;
+  const c = document.createRange();
+  try {
+    c.setStart(f.node, f.offset), c.setEnd(d.node, d.offset);
+  } catch {
+    c.selectNodeContents(t), c.collapse(!1);
+  }
+  o.removeAllRanges(), o.addRange(c);
+}, he = (t, e, n) => {
+  const r = window.getSelection();
+  if (!r || typeof r.modify != "function" || !t.contains(r.focusNode) || !t.contains(r.anchorNode)) return !1;
+  const i = n === "right" ? "forward" : "backward";
+  try {
+    return r.modify(e, i, "character"), L(r.focusNode) && r.modify(e, i, "character"), !0;
+  } catch {
+    return !1;
+  }
+}, me = (t) => {
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return null;
+  const n = e.getRangeAt(0);
+  return !t.contains(n.startContainer) || !t.contains(n.endContainer) ? null : n;
+}, Ne = (t) => {
+  const e = t.parentNode;
+  return e ? Array.from(e.childNodes).indexOf(t) : -1;
+}, Te = (t) => {
+  const e = t.startContainer, n = t.startOffset;
+  if (e.nodeType === Node.ELEMENT_NODE) return {
+    parent: e,
+    index: n
+  };
+  if (e.nodeType === Node.TEXT_NODE) {
+    const r = e, i = r.textContent ?? "", u = Ne(r);
+    return u < 0 || !r.parentNode ? null : i === k ? {
+      parent: r.parentNode,
+      index: u + (n > 0 ? 1 : 0)
+    } : n === 0 ? {
+      parent: r.parentNode,
+      index: u
+    } : n === i.length ? {
+      parent: r.parentNode,
+      index: u + 1
+    } : null;
+  }
+  return null;
+}, J = (t, e) => {
+  const n = window.getSelection();
+  if (!n) return;
+  const r = document.createRange();
+  r.setStart(t, e), r.collapse(!0), n.removeAllRanges(), n.addRange(r);
+}, W = (t, e) => {
+  const n = t.childNodes[e - 1];
+  n && L(n) && t.removeChild(n);
+  const r = Math.max(0, Math.min(e, t.childNodes.length - 1)), i = t.childNodes[r + 1];
+  i && L(i) && t.removeChild(i);
+}, ye = (t, e) => {
+  const n = me(t);
+  if (!n || !n.collapsed) return !1;
+  const r = Te(n);
+  if (!r) return !1;
+  const i = r.parent, u = i.childNodes, N = (c) => {
+    let s = c;
+    for (; s > 0 && L(u[s - 1]); ) s--;
+    return s;
+  }, f = (c) => {
+    let s = c;
+    for (; s < u.length && L(u[s]); ) s++;
+    return s;
+  };
+  if (e === "backspace") {
+    const c = N(r.index), s = c > 0 ? u[c - 1] : null;
+    if (s && S(s)) {
+      const a = c - 1;
+      return i.removeChild(s), W(i, a), J(i, Math.max(0, Math.min(a, i.childNodes.length))), !0;
+    }
+    return !1;
+  }
+  const d = f(r.index), o = u[d] ?? null;
+  if (o && S(o)) {
+    const c = d;
+    return i.removeChild(o), W(i, c), J(i, Math.max(0, Math.min(c, i.childNodes.length))), !0;
+  }
+  return !1;
+}, $ = (t) => {
+  t.querySelectorAll(`.${I}`).forEach((r) => r.classList.remove(j));
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return;
+  const n = e.getRangeAt(0);
+  !t.contains(n.startContainer) || !t.contains(n.endContainer) || t.querySelectorAll(`.${I}`).forEach((r) => {
+    try {
+      n.intersectsNode(r) && r.classList.add(j);
+    } catch {
+    }
+  });
+}, q = (t, e, n, r) => {
+  H(t);
+  const i = (n ?? []).filter(Boolean).filter((o) => o && (o.type === "text" || o.type === "block") && Number.isFinite(o.start) && Number.isFinite(o.end) && o.start <= o.end), u = i.length ? i : se(e), N = r.filter((o) => typeof o != "string"), f = document.createDocumentFragment(), d = () => {
+    const o = f.lastChild;
+    o?.nodeType === Node.TEXT_NODE && (o.textContent ?? "") === k || f.appendChild(document.createTextNode(k));
+  };
+  u.forEach((o) => {
+    if (!o || !o.type) return;
+    const c = o.value ?? e.slice(o.start, o.end);
+    if (o.type === "text") {
+      const g = typeof o.content == "string" ? o.content : typeof c == "string" ? c : e.slice(o.start, o.end);
+      g?.length && f.appendChild(document.createTextNode(g));
+      return;
+    }
+    const s = X(c);
+    let a;
+    if (N.length) {
+      const g = N[0], h = X(g?.value ?? g);
+      (s === "" || h === s) && (a = g, N.shift());
+    }
+    a || (a = {
+      value: c
+    });
+    const m = o.content && typeof o.content != "string" ? oe.renderToStaticMarkup(/* @__PURE__ */ ee(te, { children: o.content })) : void 0;
+    d(), f.appendChild(G(a, m)), d();
+  }), t.innerHTML = "", t.appendChild(f), H(t);
+}, Ae = (t) => {
+  const e = ne.c(28), {
+    editorRef: n,
+    transformSyntax: r,
+    filterSuggestionsByLastToken: i,
+    onLastTokenChange: u,
+    onStateChange: N
+  } = t, f = i === void 0 ? !1 : i, [d, o] = re.useState("");
+  let c;
+  e[0] !== f || e[1] !== u || e[2] !== N || e[3] !== r ? (c = (l) => {
+    if (!l)
+      return;
+    H(l);
+    const p = ge(l), T = de(l), R = ue(T), C = T.filter(Ee);
+    f && u?.(z(l)?.token ?? null);
+    let M = null;
+    r && (M = r(R, T), q(l, R, M, T)), p ? pe(l, p.start, p.end) : K(l), $(l);
+    const A = l.innerHTML ?? "";
+    o((v) => v === A ? v : A), N?.({
+      value: R,
+      tokens: C,
+      segments: M
+    });
+  }, e[0] = f, e[1] = u, e[2] = N, e[3] = r, e[4] = c) : c = e[4];
+  const s = c;
+  let a;
+  e[5] !== r ? (a = (l) => {
+    const p = document.createElement("div"), T = [], R = r ? r(l, T) : null;
+    q(p, l, R, T);
+    const C = p.innerHTML ?? "";
+    return o(C), C;
+  }, e[5] = r, e[6] = a) : a = e[6];
+  const m = a;
+  let g;
+  e[7] !== n || e[8] !== f || e[9] !== s ? (g = (l) => {
+    const p = n.current;
+    if (!p)
+      return;
+    H(p), p.focus({
+      preventScroll: !0
+    });
+    const T = l.insertMode ?? "replace", C = (() => {
+      const E = document.createRange();
+      switch (T) {
+        case "append":
+          return E.selectNodeContents(p), E.collapse(!1), E;
+        case "prepend":
+          return E.selectNodeContents(p), E.collapse(!0), E;
+        case "replace":
+          return E.selectNodeContents(p), E;
+        case "insert":
+        default:
+          return K(p);
+      }
+    })(), M = fe(l);
+    if (f && T !== "replace") {
+      const E = z(p);
+      E ? E.range.deleteContents() : C.deleteContents();
+    } else
+      C.deleteContents();
+    const A = G(M), v = document.createTextNode(k), B = document.createTextNode(k);
+    C.insertNode(v), C.insertNode(A), A.parentNode?.insertBefore(B, A.nextSibling ?? null);
+    const Z = window.getSelection(), F = document.createRange();
+    try {
+      F.setStart(B, 1);
+    } catch {
+      F.setStartAfter(A);
+    }
+    F.collapse(!0), Z?.removeAllRanges(), Z?.addRange(F), s(p);
+  }, e[7] = n, e[8] = f, e[9] = s, e[10] = g) : g = e[10];
+  const h = g;
+  let y;
+  e[11] !== n || e[12] !== s ? (y = (l) => {
+    l.preventDefault();
+    const p = l.clipboardData.getData("text/plain");
+    le(n.current, p), s(n.current);
+  }, e[11] = n, e[12] = s, e[13] = y) : y = e[13];
+  const x = y;
+  let w;
+  e[14] !== n || e[15] !== s ? (w = (l) => {
+    s(n.current);
+  }, e[14] = n, e[15] = s, e[16] = w) : w = e[16];
+  const D = w, Y = xe;
+  let _;
+  e[17] !== n || e[18] !== s ? (_ = (l) => {
+    const p = n.current;
+    if (!p || document.activeElement !== p)
+      return !1;
+    if ((l.key === "Backspace" || l.key === "Delete") && ye(p, l.key === "Backspace" ? "backspace" : "delete"))
+      return l.preventDefault(), l.stopPropagation(), s(p), !0;
+    if (l.key === "ArrowLeft" || l.key === "ArrowRight") {
+      const T = l.key === "ArrowLeft" ? "left" : "right";
+      if (he(p, l.shiftKey ? "extend" : "move", T))
+        return l.preventDefault(), l.stopPropagation(), $(p), !0;
+    }
+    return l.key === "Enter" ? (l.preventDefault(), !0) : !1;
+  }, e[17] = n, e[18] = s, e[19] = _) : _ = e[19];
+  const V = _;
+  let b;
+  return e[20] !== h || e[21] !== d || e[22] !== D || e[23] !== V || e[24] !== x || e[25] !== m || e[26] !== s ? (b = {
+    editorHtml: d,
+    setEditorHtml: o,
+    initializeFromExternalValue: m,
+    updateEditorState: s,
+    applySuggestionValueSyntax: h,
+    handlePaste: x,
+    handleChange: D,
+    handleKeyDownCapture: Y,
+    handleKeyDown: V
+  }, e[20] = h, e[21] = d, e[22] = D, e[23] = V, e[24] = x, e[25] = m, e[26] = s, e[27] = b) : b = e[27], b;
+};
+function Ee(t) {
+  return typeof t != "string";
+}
+function xe(t) {
+  (t.key === " " || t.code === "Space") && (t.stopPropagation(), t.nativeEvent?.stopImmediatePropagation?.());
+}
+export {
+  de as serializeEditorParts,
+  Ae as useContentEditableController
+};

package/dist/components/form/InputSuggestion.d.ts

@@ -23,5 +23,5 @@ export interface InputSuggestionMenuContentItemsHandle {
     selectActiveItem: () => InputSuggestion | undefined;
     clearActiveItem: () => void;
 }
-export declare const InputSuggestionMenuContent: React.FC<InputSuggestionMenuContentProps>;
-export declare const InputSuggestionMenuContentItems: React.FC<InputSuggestionMenuContentItemsProps>;
+export declare const InputSuggestionMenuContent: React.NamedExoticComponent<InputSuggestionMenuContentProps>;
+export declare const InputSuggestionMenuContentItems: React.NamedExoticComponent<InputSuggestionMenuContentItemsProps>;