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

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

@@ -1,27 +1,10 @@
 import { default as React } from 'react';
-import { InputSuggestion } from './InputSuggestion';
 export type InputSyntaxSegment = {
     type: "text" | "block";
+    value?: any;
     start: number;
     end: number;
     visualLength?: number;
     content?: string | React.ReactNode;
 };
-export type VisualizedInputSyntaxSegment = InputSyntaxSegment & {
-    visualStart: number;
-    visualEnd: number;
-};
 export declare const buildDefaultSyntax: (value: any) => InputSyntaxSegment[];
-export declare const visualizeSyntaxSegments: (syntaxSegments: InputSyntaxSegment[]) => VisualizedInputSyntaxSegment[];
-export declare const useSyntaxModel: (value: any, transformSyntax: ((value: any, appliedSyntaxParts?: (InputSuggestion | any)[]) => InputSyntaxSegment[]) | undefined, inputRef: React.RefObject<HTMLInputElement>, appliedSyntaxParts?: (InputSuggestion | any)[]) => {
-    syntaxSegments: InputSyntaxSegment[];
-    visualizedSyntaxSegments: VisualizedInputSyntaxSegment[];
-    expandSelectionRangeToBlockBoundaries: (rawStart: number, rawEnd: number) => {
-        start: number;
-        end: number;
-        hasBlockOverlap: boolean;
-    };
-    mapVisualIndexToRawIndex: (visualIndex: number) => number;
-    mapRawIndexToVisualIndex: (rawIndex: number) => number;
-    totalVisualLength: number;
-};

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

@@ -1,80 +1,14 @@
-import c from "react";
-const S = (i) => {
-  const a = i ?? "", s = typeof a == "string" ? a : String(a);
+const a = (n) => {
+  const e = n ?? "", t = typeof e == "string" ? e : String(e);
   return [{
     type: "text",
+    value: t,
     start: 0,
-    end: s.length,
-    visualLength: s.length,
-    content: s
+    end: t.length,
+    visualLength: t.length,
+    content: t
   }];
-}, p = (i) => {
-  let a = 0;
-  return i.map((s) => {
-    const h = {
-      ...s,
-      visualStart: a,
-      visualEnd: a + (s?.visualLength ?? 0)
-    };
-    return a = h.visualEnd, h;
-  });
-}, d = (i, a, s) => Math.max(a, Math.min(i, s)), y = (i, a, s, h) => {
-  const g = c.useMemo(() => {
-    if (a) {
-      const n = a(i, h);
-      if (n?.length) return n;
-    }
-    return S(i);
-  }, [h, a, i]), u = c.useMemo(() => p(g), [g]), v = c.useCallback((n, t) => {
-    let r = Math.min(n, t), l = Math.max(n, t), o = !1;
-    return u.forEach((e) => {
-      e.type !== "block" || !(r < e.end && l > e.start) || (r = Math.min(r, e.start), l = Math.max(l, e.end), o = !0);
-    }), {
-      start: r,
-      end: l,
-      hasBlockOverlap: o
-    };
-  }, [u]), m = c.useCallback((n) => {
-    const t = u.find((e) => n >= e.visualStart && n <= e.visualEnd);
-    if (!t) {
-      const e = s.current?.value.length ?? 0;
-      return d(n, 0, e);
-    }
-    const r = t.end - t.start, l = d(n - t.visualStart, 0, t?.visualLength ?? 0);
-    if (r <= 0) return t.start;
-    if (t.type === "text")
-      return Math.min(t.start + Math.round(l), t.end);
-    if ((t?.visualLength ?? 0) <= 0) return t.start;
-    const o = l / (t?.visualLength ?? 0);
-    return Math.round(t.start + o * r);
-  }, [s, u]), f = c.useCallback((n) => {
-    const t = u.find((e) => n >= e.start && n <= e.end);
-    if (!t) {
-      const e = s.current?.value.length ?? 0;
-      return d(n, 0, e);
-    }
-    const r = t.end - t.start, l = d(n - t.start, 0, r);
-    if (r <= 0) return t.visualStart;
-    if (t.type === "text")
-      return Math.min(t.visualStart + l, t.visualEnd);
-    if ((t?.visualLength ?? 0) <= 0) return t.visualStart;
-    const o = l / r;
-    return Math.min(t.visualStart + o * (t?.visualLength ?? 0), t.visualEnd);
-  }, [s, u]), M = c.useMemo(() => {
-    const n = u[u.length - 1];
-    return n ? n.visualEnd : 0;
-  }, [u]);
-  return {
-    syntaxSegments: g,
-    visualizedSyntaxSegments: u,
-    expandSelectionRangeToBlockBoundaries: v,
-    mapVisualIndexToRawIndex: m,
-    mapRawIndexToVisualIndex: f,
-    totalVisualLength: M
-  };
 };
 export {
-  S as buildDefaultSyntax,
-  y as useSyntaxModel,
-  p as visualizeSyntaxSegments
+  a as buildDefaultSyntax
 };

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

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
 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;
@@ -8,4 +8,3 @@ export declare const getSelectionMetrics: (target: HTMLInputElement) => {
     rawEnd: number;
     direction: string;
 };
-export declare const useSyncSyntaxScroll: (inputRef: React.RefObject<HTMLInputElement | null>, syntaxRef: React.RefObject<HTMLDivElement | null>) => () => void;

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

@@ -1,33 +1,38 @@
-import { c as l } from "../../_virtual/compiler-runtime.js";
-const a = (t, r, e, c) => {
-  const o = Object.getOwnPropertyDescriptor(t, r)?.set, s = Object.getPrototypeOf(t), n = Object.getOwnPropertyDescriptor(s, r)?.set;
-  o && o !== n ? n?.call(t, e) : o?.call(t, e), t.dispatchEvent(new Event(c, {
+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
   }));
-}, S = (t, r, e, c) => {
+}, 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(r, e, c);
+    t.setSelectionRange(e, n, c);
   } catch {
   }
-}, p = (t) => {
-  const r = t.selectionStart ?? 0, e = t.selectionEnd ?? r;
+}, b = (t) => {
+  const e = t.selectionStart ?? 0, n = t.selectionEnd ?? e;
   return {
-    selectionStart: r,
-    selectionEnd: e,
-    rawStart: Math.min(r, e),
-    rawEnd: Math.max(r, e),
+    selectionStart: e,
+    selectionEnd: n,
+    rawStart: Math.min(e, n),
+    rawEnd: Math.max(e, n),
     direction: t.selectionDirection === "backward" ? "backward" : "forward"
   };
-}, u = (t, r) => {
-  const e = l.c(3);
-  let c;
-  return e[0] !== t || e[1] !== r ? (c = () => {
-    !t.current || !r.current || (r.current.scrollLeft = t.current.scrollLeft);
-  }, e[0] = t, e[1] = r, e[2] = c) : c = e[2], c;
 };
 export {
-  p as getSelectionMetrics,
+  i as clearInputElement,
+  b as getSelectionMetrics,
   a as setElementKey,
-  S as setSelectionRangeSafe,
-  u as useSyncSyntaxScroll
+  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 {};