@code0-tech/pictor 0.16.0 → 0.17.0

package/dist/components/form/InputContentEditable.hook.d.ts

@@ -1,52 +0,0 @@
-import { default as React } from 'react';
-import { InputSuggestion } from './InputSuggestion';
-import { InputSyntaxSegment } from './Input.syntax.hook';
-/**
- * =========================
- * Types
- * =========================
- */
-type EditorPart = string | InputSuggestion | any;
-export type UseContentEditableControllerProps = {
-    editorRef: React.RefObject<HTMLElement>;
-    transformSyntax?: ((value: any, appliedSyntaxParts?: (InputSuggestion | any)[]) => InputSyntaxSegment[]) | undefined;
-    filterSuggestionsByLastToken?: boolean;
-    onLastTokenChange?: (token: string | null) => void;
-    onStateChange?: (payload: {
-        value: string;
-        tokens: InputSuggestion[];
-        segments?: InputSyntaxSegment[] | null;
-    }) => void;
-};
-export type UseContentEditableControllerReturn = {
-    editorHtml: string;
-    setEditorHtml: React.Dispatch<React.SetStateAction<string>>;
-    initializeFromExternalValue: (externalValue: string) => string;
-    updateEditorState: (rootEl: HTMLElement | null) => void;
-    takePendingSelection: () => {
-        start: number;
-        end: number;
-    } | null;
-    applySuggestionValueSyntax: (suggestion: InputSuggestion) => void;
-    handlePaste: (event: React.ClipboardEvent<HTMLDivElement>) => void;
-    handleChange: (event: React.FormEvent<HTMLDivElement>) => void;
-    handleKeyDownCapture: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
-};
-export declare const serializeEditorParts: (rootEl: HTMLElement | null) => EditorPart[];
-/**
- * ✅ FIX (caret after deleting last token):
- * Selection can have startContainer = ELEMENT_NODE with an offset (i.e. “between childNodes”).
- */
-export declare const getSelectionOffsetsInValue: (rootEl: HTMLElement) => {
-    start: number;
-    end: number;
-} | null;
-export declare const setSelectionOffsetsInValue: (rootEl: HTMLElement, start: number, end: number) => void;
-/**
- * =========================
- * Hook
- * =========================
- */
-export declare const useContentEditableController: (props: UseContentEditableControllerProps) => UseContentEditableControllerReturn;
-export {};

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

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

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

@@ -1,27 +0,0 @@
-import { MenuContentProps } from '../menu/Menu';
-import { default as React, RefObject } from 'react';
-export interface InputSuggestion {
-    children: React.ReactNode;
-    value: any;
-    valueData?: any;
-    groupBy?: string;
-    insertMode?: "replace" | "append" | "prepend" | "insert";
-}
-export type InputSuggestionMenuContentProps = MenuContentProps & {
-    inputRef?: RefObject<HTMLInputElement>;
-};
-export interface InputSuggestionMenuContentItemsProps {
-    suggestions?: InputSuggestion[];
-    onSuggestionSelect?: (suggestion: InputSuggestion) => void;
-    inputRef?: RefObject<HTMLInputElement>;
-}
-export interface InputSuggestionMenuContentItemsHandle {
-    focusFirstItem: () => InputSuggestion | undefined;
-    focusLastItem: () => InputSuggestion | undefined;
-    highlightNextItem: () => InputSuggestion | undefined;
-    highlightPreviousItem: () => InputSuggestion | undefined;
-    selectActiveItem: () => InputSuggestion | undefined;
-    clearActiveItem: () => void;
-}
-export declare const InputSuggestionMenuContent: React.NamedExoticComponent<InputSuggestionMenuContentProps>;
-export declare const InputSuggestionMenuContentItems: React.NamedExoticComponent<InputSuggestionMenuContentItemsProps & React.RefAttributes<InputSuggestionMenuContentItemsHandle>>;