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

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

@@ -1,16 +1,21 @@
-import { default as React, ForwardRefExoticComponent } from 'react';
-import { Code0Component } from '../../utils/types';
+import { default as React } from 'react';
+import { Code0Component } from '../../utils';
 import { ValidationProps } from './useForm';
 import { InputSuggestion } from './InputSuggestion';
-export declare const setElementKey: (element: HTMLElement, key: string, value: any, event: string) => void;
+import { InputSyntaxSegment } from './Input.syntax.hook';
 export type Code0Input = Omit<Omit<Omit<Code0Component<HTMLInputElement>, "left">, "right">, "title">;
 export interface InputProps<T> extends Code0Input, ValidationProps<T> {
     suggestions?: InputSuggestion[];
     suggestionsHeader?: React.ReactNode;
     suggestionsFooter?: React.ReactNode;
     onSuggestionSelect?: (suggestion: InputSuggestion) => void;
-    transformValue?: (value: T) => React.ReactNode | T;
+    transformSyntax?: (value: T, appliedSyntaxParts?: (InputSuggestion | any)[]) => InputSyntaxSegment[];
+    validationUsesSyntax?: boolean;
     disableOnValue?: (value: T) => boolean;
+    filterSuggestionsByLastToken?: boolean;
+    onLastTokenChange?: (token: string | null) => void;
+    enforceUniqueSuggestions?: boolean;
+    suggestionsEmptyState?: React.ReactNode;
     wrapperComponent?: Code0Component<HTMLDivElement>;
     right?: React.ReactNode;
     left?: React.ReactNode;
@@ -19,4 +24,12 @@ export interface InputProps<T> extends Code0Input, ValidationProps<T> {
     title?: React.ReactNode;
     description?: React.ReactNode;
 }
-export declare const Input: ForwardRefExoticComponent<InputProps<any>>;
+export type InputElement = HTMLInputElement | HTMLDivElement;
+export type InputActiveSuggestionSpan = {
+    id: number;
+    suggestion: InputSuggestion;
+    text: string;
+    start: number;
+    end: number;
+};
+export declare const Input: React.FC<InputProps<any>>;

package/dist/components/form/Input.js

@@ -1,153 +1,347 @@
-import { jsxs as f, jsx as r, Fragment as T } from "react/jsx-runtime";
-import h, { useRef as v, useState as x, useEffect as V, useMemo as k } from "react";
-import { mergeCode0Props as y } from "../../utils/utils.js";
-import '../../assets/Input.css';/* empty css                         */
-import { InputLabel as A } from "./InputLabel.js";
-import { InputDescription as K } from "./InputDescription.js";
-import { InputMessage as H } from "./InputMessage.js";
-import { Menu as J, MenuTrigger as U, MenuPortal as q } from "../menu/Menu.js";
-import { InputSuggestionMenuContent as z, InputSuggestionMenuContentItems as B } from "./InputSuggestion.js";
-const G = (t, s, n, a) => {
-  const o = Object.getOwnPropertyDescriptor(t, s)?.set, l = Object.getPrototypeOf(t), i = Object.getOwnPropertyDescriptor(l, s)?.set;
-  o && o !== i ? i?.call(t, n) : o?.call(t, n), t.dispatchEvent(new Event(a, {
-    bubbles: !0
-  }));
-}, oe = h.forwardRef((t, s) => {
-  const n = s || v(null), a = v(null), [o, l] = x(!1), i = v(!0), [c, _] = x(t.defaultValue || t.initialValue || t.placeholder), {
-    wrapperComponent: P = {},
-    // Default empty wrapper props
-    title: b,
-    // Optional input label
-    description: M,
-    // Optional description below label
-    disabled: w = !1,
-    // Input disabled state
-    left: E,
-    // Left element (icon/button)
-    right: I,
-    // Right element (icon/button)
-    leftType: j = "icon",
-    // Visual hint for left
-    rightType: R = "action",
-    // Visual hint for right
-    formValidation: u = {
+import { jsx as f, jsxs as z } from "react/jsx-runtime";
+import i, { useRef as y, useState as K, useMemo as L, useEffect as x } from "react";
+import Qe from "../../_virtual/react-contenteditable.js";
+import "../../utils/contextStore.js";
+import { mergeCode0Props as le } from "../../utils/utils.js";
+import '../../assets/components/form/Input.style.css';/* empty css                 */
+import { InputLabel as Xe } from "./InputLabel.js";
+import { InputDescription as Ye } from "./InputDescription.js";
+import { InputMessage as Ze } from "./InputMessage.js";
+import { Menu as _e, MenuTrigger as et, MenuPortal as tt } from "../menu/Menu.js";
+import { InputSuggestionMenuContent as nt, InputSuggestionMenuContentItems as rt } from "./InputSuggestion.js";
+import { getSelectionMetrics as ot, setElementKey as st, setSelectionRangeSafe as at } from "./Input.utils.js";
+import { Card as ut } from "../card/Card.js";
+import { useContentEditableController as it } from "./InputContentEditable.hook.js";
+const X = (u) => {
+  const k = u ?? "";
+  return typeof k == "string" ? k : String(k);
+}, $e = (u) => {
+  if (u == null) return "";
+  if (typeof u == "string") return u;
+  try {
+    return JSON.stringify(u);
+  } catch {
+    return String(u ?? "");
+  }
+}, Fe = (u) => {
+  if (!u) return null;
+  const k = u.value ?? "", Y = u.selectionStart ?? k.length, E = k.slice(0, Y).match(/\S+$/);
+  if (!E || E.index === void 0) return null;
+  const g = E[0], $ = E.index, N = $ + g.length;
+  return {
+    token: g,
+    start: $,
+    end: N
+  };
+}, lt = i.forwardRef((u, k) => {
+  const {
+    wrapperComponent: Y = {},
+    title: Z,
+    description: E,
+    disabled: g = !1,
+    left: $,
+    right: N,
+    leftType: Be = "icon",
+    rightType: Ae = "action",
+    formValidation: V = {
       valid: !0,
       notValidMessage: null,
       setValue: null
     },
-    // Validation config
-    suggestions: d,
-    // Optional suggestions array
-    suggestionsHeader: S,
-    // Optional header above suggestion list
-    suggestionsFooter: O,
-    // Optional footer below suggestion list
-    onSuggestionSelect: C = () => {
-    },
-    // Callback for suggestion selection,
-    disableOnValue: D = () => !1,
+    suggestions: l,
+    suggestionsHeader: ce,
+    suggestionsFooter: fe,
+    onSuggestionSelect: de,
+    disableOnValue: pe = () => !1,
+    transformSyntax: P,
+    validationUsesSyntax: j = !1,
+    filterSuggestionsByLastToken: h = !1,
+    enforceUniqueSuggestions: ge = !1,
+    onLastTokenChange: he,
+    suggestionsEmptyState: me,
+    ...ze
+  } = u, {
+    onFocus: Se,
+    onBlur: _,
+    onKeyDown: q,
+    onKeyDownCapture: ee,
+    onChange: F,
+    onInput: B,
     ...m
-    // Remaining native input props
-  } = t;
-  V(() => {
-    const e = n.current;
-    if (!e || !u?.setValue) return;
-    const g = (L) => {
-      const N = m.type !== "checkbox" ? L.target.value : L.target.checked;
-      u.setValue?.(N);
-    };
-    return e.addEventListener("change", g), () => e.removeEventListener("change", g);
-  }, [u?.setValue]), V(() => {
-    if (!d) return;
-    const e = (g) => {
-      i.current = !!n.current?.contains(g.target);
+  } = ze, W = y(null), d = y(null), H = y(null), M = y(null), te = y(null), D = y(!1), Ne = y(0), Ce = y(null), ne = m.value ?? u.initialValue ?? u.defaultValue, [ye, je] = K(!1), R = y(!1), a = i.useCallback((e) => {
+    R.current = e, je(e);
+  }, []), [w, re] = K(ne), [ve, be] = K([]), [ke, oe] = K([]), [we, qe] = K(null), [xe, Ee] = K(null), o = !!P, I = L(() => pe(w), [pe, w]), v = L(() => o ? H : d, [o]);
+  i.useImperativeHandle(k, () => v.current ?? null, [v]);
+  const We = L(() => ({
+    ...m,
+    onChange: F,
+    onInput: B
+  }), [m, F, B]), He = L(() => {
+    const {
+      value: e,
+      defaultValue: t,
+      ...n
+    } = m;
+    return le("input__control", n);
+  }, [m]), U = i.useCallback(() => {
+    const e = v.current;
+    !e || g || I || e.focus({
+      preventScroll: !0
+    });
+  }, [v, g, I]), T = i.useCallback(() => {
+    l && a(!0);
+  }, [l, a]), se = i.useCallback((e) => {
+    h && (qe(e), e && a(!0), he?.(e));
+  }, [h, he, a]), ae = i.useCallback((e, t) => {
+    if (!V?.setValue) return;
+    const n = m.type !== "checkbox" ? X(e) : e, r = j ? t : n;
+    Object.is(Ce.current, r) || (Ce.current = r, V.setValue(r));
+  }, [V?.setValue, m.type, j]), p = it({
+    editorRef: H,
+    transformSyntax: P,
+    filterSuggestionsByLastToken: h,
+    onLastTokenChange: se,
+    onStateChange: ({
+      value: e,
+      tokens: t,
+      segments: n
+    }) => {
+      re(e), oe(t), Ee(n ?? null), ae(e, n ?? null);
+    }
+  }), Ve = y(!1);
+  x(() => {
+    if (!o || !P || Ve.current) return;
+    const e = X(ne);
+    re(e), p.initializeFromExternalValue(e), j && P && Ee(P(e, [])), Ve.current = !0;
+  }, [o, P, ne, j, p]), x(() => {
+    o || m.value !== void 0 && re(m.value);
+  }, [m.value, o]), x(() => {
+    ae(w, xe);
+  }, [ae, xe, w]), x(() => {
+    if (!l) return;
+    const e = (t) => {
+      const n = t.target, r = !!H.current?.contains(n), s = !!d.current?.contains(n), c = !!te.current?.contains(n), S = !!W.current?.contains(n), C = r || s || c || S;
+      D.current = C, !C && R.current && a(!1);
     };
     return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
-  }, [d]);
-  const p = h.useMemo(() => D(c), [c, D]);
-  V(() => {
-    n.current && (n.current.addEventListener("change", (e) => {
-      p || _(e.target.value);
-    }), n.current.addEventListener("input", (e) => {
-      p || _(e.target.value);
-    }));
-  }, [n, p]);
-  const $ = h.useMemo(() => t.transformValue ? /* @__PURE__ */ f("div", { className: "input__syntax", children: [
-    t.transformValue(c),
-    " "
-  ] }) : null, [t.transformValue, c]), F = k(() => /* @__PURE__ */ f(
-    J,
-    {
-      open: o,
-      modal: !1,
-      onOpenChange: (e) => {
-        if (!e && i.current) {
-          i.current = !1;
-          return;
+  }, [l, a]), x(() => {
+    const e = W.current;
+    if (!e) return;
+    const t = () => T();
+    return e.addEventListener("focusin", t), () => e.removeEventListener("focusin", t);
+  }, [T]);
+  const De = i.useCallback((e, t, n) => {
+    if (e.length === 0) return t <= n.length ? t : null;
+    let r = n.indexOf(e);
+    if (r === -1) return null;
+    let s = r;
+    for (; s !== -1; )
+      Math.abs(s - t) < Math.abs(r - t) && (r = s), s = n.indexOf(e, s + 1);
+    return r;
+  }, []), J = i.useCallback((e, t) => {
+    const n = [];
+    return e.forEach((r) => {
+      const s = De(r.text, r.start, t);
+      if (s === null) return;
+      const c = s + r.text.length;
+      t.slice(s, c) === r.text && n.push({
+        ...r,
+        start: s,
+        end: c
+      });
+    }), n;
+  }, [De]);
+  x(() => {
+    if (o) return;
+    const e = X(d.current?.value ?? w);
+    be((t) => {
+      const n = J(t, e);
+      return oe(n.map((r) => r.suggestion)), n;
+    });
+  }, [o, J, w]), x(() => {
+    if (!h || o) return;
+    const e = d.current;
+    if (!e) return;
+    const t = () => se(Fe(e)?.token ?? null);
+    return e.addEventListener("input", t), e.addEventListener("keyup", t), e.addEventListener("mouseup", t), t(), () => {
+      e.removeEventListener("input", t), e.removeEventListener("keyup", t), e.removeEventListener("mouseup", t);
+    };
+  }, [h, o, se]);
+  const O = L(() => {
+    if (!h || !l) return l;
+    const e = we?.trim();
+    return e?.length ? l.filter((t) => String(t?.value ?? "").toLowerCase().startsWith(e.toLowerCase())) : l;
+  }, [h, we, l]), G = L(() => {
+    if (!ge || !O) return O;
+    if (o) {
+      const t = new Set((ke ?? []).map((n) => $e(n?.value ?? n)));
+      return O.filter((n) => !t.has($e(n?.value ?? n)));
+    }
+    const e = new Set(ve.map((t) => t.suggestion));
+    return O.filter((t) => !e.has(t));
+  }, [ve, ke, ge, O, o]), Ie = i.useCallback((e) => {
+    if (!d.current) return;
+    const t = typeof w == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), r = e.insertMode ?? "replace", s = d.current.value ?? "";
+    let c = s, S = null, C = 0;
+    const A = h ? Fe(d.current) : null;
+    if (h && A)
+      c = `${s.slice(0, A.start)}${n}${s.slice(A.end)}`, S = A.start + n.length, C = A.start;
+    else
+      switch (r) {
+        case "append":
+          c = `${s}${n}`, S = c.length, C = s.length;
+          break;
+        case "prepend":
+          c = `${n}${s}`, S = n.length, C = 0;
+          break;
+        case "insert": {
+          const {
+            rawStart: b,
+            rawEnd: ie
+          } = ot(d.current);
+          c = `${s.slice(0, b)}${n}${s.slice(ie)}`, S = b + n.length, C = b;
+          break;
         }
-        l(e), e && setTimeout(() => n.current?.focus(), 0);
-      },
-      children: [
-        /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ r(
-          "input",
+        case "replace":
+        default:
+          c = n, S = n.length, C = 0;
+          break;
+      }
+    st(d.current, "value", c, "change"), be((b) => {
+      const ie = X(c), Te = J(b, ie), Oe = n.length ? {
+        id: Ne.current++,
+        suggestion: e,
+        text: n,
+        start: C,
+        end: C + n.length
+      } : null, Ke = Oe ? [...Te, Oe] : Te;
+      return oe(Ke.map((Ge) => Ge.suggestion)), Ke;
+    }), S !== null && requestAnimationFrame(() => {
+      const b = d.current;
+      b && (b.focus({
+        preventScroll: !0
+      }), at(b, S, S));
+    });
+  }, [h, J, w]), Le = i.useCallback((e) => {
+    if (o ? p.applySuggestionValueSyntax(e) : Ie(e), de?.(e), o) {
+      const t = v.current;
+      requestAnimationFrame(() => {
+        if (!t) return;
+        const n = {
+          type: "change",
+          target: t,
+          currentTarget: t
+        };
+        t.dispatchEvent(new Event("input", {
+          bubbles: !0
+        })), B?.(n), F?.(n);
+      });
+    }
+    a(!1), D.current = !1, requestAnimationFrame(() => {
+      U();
+    });
+  }, [v, Ie, p, U, o, de, a, F, B]), Pe = i.useCallback((e) => {
+    T(), Se?.(e);
+  }, [T, Se]), Q = i.useCallback((e) => {
+    if (D.current) {
+      _?.(e);
+      return;
+    }
+    a(!1), _?.(e);
+  }, [_, a]), Me = i.useCallback((e) => {
+    if (o) {
+      p.handleKeyDownCapture(e), ee?.(e);
+      return;
+    }
+    (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.()), ee?.(e);
+  }, [p, o, ee]), Re = i.useCallback((e) => {
+    if (l) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), e.stopPropagation(), R.current ? M.current?.highlightNextItem?.() : (a(!0), setTimeout(() => M.current?.focusFirstItem?.(), 0));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), e.stopPropagation(), R.current ? M.current?.highlightPreviousItem?.() : (a(!0), setTimeout(() => M.current?.focusLastItem?.(), 0));
+        return;
+      }
+      if (e.key === "Enter" && R.current) {
+        e.preventDefault(), e.stopPropagation(), M.current?.selectActiveItem?.() && a(!1);
+        return;
+      }
+      if (e.key === "Escape" && R.current) {
+        e.preventDefault(), e.stopPropagation(), a(!1);
+        return;
+      }
+    }
+    if (o && p.handleKeyDown(e)) {
+      q?.(e);
+      return;
+    }
+    if (o && e.key === "Enter") {
+      e.preventDefault(), q?.(e);
+      return;
+    }
+    q?.(e);
+  }, [p, o, l, a, q]), ue = o ? /* @__PURE__ */ f(Qe, { innerRef: H, html: p.editorHtml, ...He, disabled: g || I, onChange: (e) => {
+    p.handleChange(e), F?.(e), B?.(e);
+  }, onPaste: p.handlePaste, onFocus: Pe, onBlur: Q, onKeyDownCapture: Me, onKeyDown: Re, spellCheck: !1, contentEditable: !g && !I }) : /* @__PURE__ */ f("input", { ref: d, ...le("input__control", We), onFocus: Pe, onBlur: Q, onKeyDownCapture: Me, onKeyDown: Re, spellCheck: !1, disabled: g || I }), Ue = i.useCallback((e) => {
+    if (g || I) return;
+    const t = e.target;
+    te.current?.contains(t) || (D.current = !0, U(), T());
+  }, [g, I, U, T]);
+  x(() => {
+    const e = W.current;
+    if (!e) return;
+    const t = (n) => {
+      const r = n.relatedTarget;
+      r && e.contains(r) || Q(n);
+    };
+    return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
+  }, [Q]);
+  const Je = L(() => /* @__PURE__ */ z(_e, { open: ye, modal: !1, onOpenChange: (e) => {
+    !e && D.current || a(e);
+  }, children: [
+    /* @__PURE__ */ f(et, { asChild: !0, children: /* @__PURE__ */ f("button", { type: "button", tabIndex: -1, "aria-hidden": !0, style: {
+      position: "absolute",
+      inset: 0,
+      opacity: 0,
+      pointerEvents: "none"
+    }, onMouseDown: (e) => e.preventDefault() }) }),
+    ue,
+    /* @__PURE__ */ f(tt, { children: /* @__PURE__ */ f("div", { ref: te, onPointerDownCapture: () => {
+      D.current = !0;
+    }, onMouseDownCapture: (e) => {
+      e.preventDefault(), D.current = !0;
+    }, children: /* @__PURE__ */ z(nt, { color: "secondary", inputRef: v, children: [
+      ce,
+      /* @__PURE__ */ z(ut, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
+        borderWidth: "2px"
+      }, children: [
+        G?.length === 0 && me,
+        !!G?.length && /* @__PURE__ */ f(
+          rt,
           {
-            ref: n,
-            ...y(`input__control ${t.transformValue ? "input__control--syntax" : ""}`, m),
-            onFocus: () => !o && l(!0),
-            onKeyDown: (e) => {
-              e.key === "ArrowDown" ? (e.preventDefault(), a.current?.focusFirstItem()) : e.key === "ArrowUp" && (e.preventDefault(), a.current?.focusLastItem());
-            },
-            disabled: w || p
+            ref: M,
+            inputRef: v,
+            suggestions: G,
+            onSuggestionSelect: Le
           }
-        ) }),
-        /* @__PURE__ */ r(q, { children: /* @__PURE__ */ f(z, { children: [
-          S,
-          " ",
-          /* @__PURE__ */ r(
-            B,
-            {
-              ref: a,
-              suggestions: d,
-              onSuggestionSelect: (e) => {
-                C || G(s.current, "value", typeof c == "object" ? JSON.stringify(e.value) : e.value, "change"), C(e), l(!1);
-              }
-            }
-          ),
-          O,
-          " "
-        ] }) })
-      ]
-    }
-  ), [o, d, S, O]);
-  return /* @__PURE__ */ f(T, { children: [
-    b && /* @__PURE__ */ r(A, { children: b }),
-    " ",
-    M && /* @__PURE__ */ r(K, { children: M }),
-    " ",
-    /* @__PURE__ */ f("div", { ...y(
-      `input ${u?.valid ? "" : "input--not-valid"}`,
-      // Add error class if invalid
-      P
-    ), children: [
-      E && /* @__PURE__ */ r("div", { className: `input__left input__left--${j}`, children: E }),
-      " ",
-      d ? F : /* @__PURE__ */ r(
-        "input",
-        {
-          tabIndex: 2,
-          ref: n,
-          disabled: w,
-          ...y(`input__control ${t.transformValue ? "input__control--syntax" : ""}`, m)
-        }
-      ),
-      $,
-      I && /* @__PURE__ */ r("div", { className: `input__right input__right--${R}`, children: I }),
-      " "
+        )
+      ] }),
+      fe
+    ] }) }) })
+  ] }), [ye, ue, o, G, ce, fe, me, Le, v, a]);
+  return /* @__PURE__ */ z("div", { children: [
+    Z && /* @__PURE__ */ f(Xe, { children: Z }),
+    E && /* @__PURE__ */ f(Ye, { children: E }),
+    /* @__PURE__ */ z("div", { ref: W, ...le(`input ${V?.valid ? "" : "input--not-valid"}`, Y), onPointerDown: Ue, children: [
+      $ && /* @__PURE__ */ f("div", { className: `input__left input__left--${Be}`, children: $ }),
+      l ? Je : ue,
+      N && /* @__PURE__ */ f("div", { className: `input__right input__right--${Ae}`, children: N })
     ] }),
-    !u?.valid && u?.notValidMessage && /* @__PURE__ */ r(H, { children: u.notValidMessage })
+    !V?.valid && V?.notValidMessage && /* @__PURE__ */ f(Ze, { children: V.notValidMessage })
   ] });
-});
+}), xt = lt;
 export {
-  oe as Input,
-  G as setElementKey
+  xt as Input
 };

package/dist/components/form/Input.syntax.hook.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export type InputSyntaxSegment = {
+    type: "text" | "block";
+    value?: any;
+    start: number;
+    end: number;
+    visualLength?: number;
+    content?: string | React.ReactNode;
+};
+export declare const buildDefaultSyntax: (value: any) => InputSyntaxSegment[];

package/dist/components/form/Input.syntax.hook.js

@@ -0,0 +1,14 @@
+const a = (n) => {
+  const e = n ?? "", t = typeof e == "string" ? e : String(e);
+  return [{
+    type: "text",
+    value: t,
+    start: 0,
+    end: t.length,
+    visualLength: t.length,
+    content: t
+  }];
+};
+export {
+  a as buildDefaultSyntax
+};

package/dist/components/form/Input.utils.d.ts

@@ -0,0 +1,10 @@
+export declare const setElementKey: (element: HTMLElement, key: string, value: any, event: string) => void;
+export declare const clearInputElement: (element: HTMLElement | null) => void;
+export declare const setSelectionRangeSafe: (target: HTMLInputElement, start: number, end: number, direction?: "forward" | "backward" | "none") => void;
+export declare const getSelectionMetrics: (target: HTMLInputElement) => {
+    selectionStart: number;
+    selectionEnd: number;
+    rawStart: number;
+    rawEnd: number;
+    direction: string;
+};

package/dist/components/form/Input.utils.js

@@ -0,0 +1,38 @@
+const a = (t, e, n, c) => {
+  const r = Object.getOwnPropertyDescriptor(t, e)?.set, s = Object.getPrototypeOf(t), o = Object.getOwnPropertyDescriptor(s, e)?.set;
+  r && r !== o ? o?.call(t, n) : r?.call(t, n), t.dispatchEvent(new Event(c, {
+    bubbles: !0
+  }));
+}, i = (t) => {
+  if (t) {
+    if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) {
+      a(t, "value", "", "change");
+      return;
+    }
+    t.isContentEditable && (t.innerHTML = "", t.dispatchEvent(new Event("input", {
+      bubbles: !0
+    })), t.dispatchEvent(new Event("change", {
+      bubbles: !0
+    })));
+  }
+}, p = (t, e, n, c) => {
+  try {
+    t.setSelectionRange(e, n, c);
+  } catch {
+  }
+}, b = (t) => {
+  const e = t.selectionStart ?? 0, n = t.selectionEnd ?? e;
+  return {
+    selectionStart: e,
+    selectionEnd: n,
+    rawStart: Math.min(e, n),
+    rawEnd: Math.max(e, n),
+    direction: t.selectionDirection === "backward" ? "backward" : "forward"
+  };
+};
+export {
+  i as clearInputElement,
+  b as getSelectionMetrics,
+  a as setElementKey,
+  p as setSelectionRangeSafe
+};

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

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { InputSuggestion } from './InputSuggestion';
+import { InputSyntaxSegment } from './Input.syntax.hook';
+import { ContentEditableEvent } from 'react-contenteditable';
+/**
+ * =========================
+ * 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;
+    applySuggestionValueSyntax: (suggestion: InputSuggestion) => void;
+    handlePaste: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+    handleChange: (event: ContentEditableEvent) => void;
+    handleKeyDownCapture: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
+};
+export declare const serializeEditorParts: (rootEl: HTMLElement | null) => EditorPart[];
+/**
+ * =========================
+ * Hook
+ * =========================
+ */
+export declare const useContentEditableController: (props: UseContentEditableControllerProps) => UseContentEditableControllerReturn;
+export {};