@lingjingai/script-editor 0.1.13 → 0.1.14

package/dist/index.js

@@ -2015,6 +2015,7 @@ function getActorCueVar(actorId, tone = "dialogue") {
   return `var(--lj-se-actor-cue-${idx})`;
 }
 var EditingSignalContext = createContext(null);
+var LIVE_COMMIT_MS = 400;
 function caretOffsetFromPoint(x, y) {
   const d = document;
   if (typeof d.caretRangeFromPoint === "function") {
@@ -2044,6 +2045,34 @@ function EditableText({
   const inputRef = useRef(null);
   const committedRef = useRef(value);
   const editingSignal = useContext(EditingSignalContext);
+  const liveTimerRef = useRef(null);
+  const composingRef = useRef(false);
+  const draftRef = useRef(value);
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  const clearLiveTimer = () => {
+    if (liveTimerRef.current) {
+      clearTimeout(liveTimerRef.current);
+      liveTimerRef.current = null;
+    }
+  };
+  const flushLive = () => {
+    clearLiveTimer();
+    const next = draftRef.current;
+    if (next !== committedRef.current) {
+      committedRef.current = next;
+      onSaveRef.current(next);
+    }
+  };
+  const scheduleLive = () => {
+    clearLiveTimer();
+    liveTimerRef.current = setTimeout(() => {
+      liveTimerRef.current = null;
+      if (composingRef.current) return;
+      flushLive();
+    }, LIVE_COMMIT_MS);
+  };
+  useEffect(() => () => flushLive(), []);
   useEffect(() => {
     if (!editing || !editingSignal) return;
     editingSignal.inc();
@@ -2079,9 +2108,11 @@ function EditableText({
     if (sel && !sel.isCollapsed) return;
     caretRef.current = caretOffsetFromPoint(e.clientX, e.clientY);
     setDraft(committedRef.current);
+    draftRef.current = committedRef.current;
     setEditing(true);
   }
   function commit() {
+    clearLiveTimer();
     setEditing(false);
     onEditEnd?.();
     if (draft !== committedRef.current) {
@@ -2090,7 +2121,9 @@ function EditableText({
     }
   }
   function cancel() {
+    clearLiveTimer();
     setDraft(committedRef.current);
+    draftRef.current = committedRef.current;
     setEditing(false);
     onEditEnd?.();
   }
@@ -2110,8 +2143,20 @@ function EditableText({
     value: draft,
     className: "lj-se-editing" + (className ? " " + className : ""),
     onChange: (e) => {
-      setDraft(e.target.value);
+      const v = e.target.value;
+      setDraft(v);
+      draftRef.current = v;
       if (multiline) autoSize(e.target);
+      if (!composingRef.current) scheduleLive();
+    },
+    onCompositionStart: () => {
+      composingRef.current = true;
+      clearLiveTimer();
+    },
+    onCompositionEnd: (e) => {
+      composingRef.current = false;
+      draftRef.current = e.currentTarget.value;
+      scheduleLive();
     },
     onBlur: commit,
     onKeyDown: (e) => {