@lingjingai/script-editor 0.1.15 → 0.1.16

package/INTEGRATION.md

@@ -66,6 +66,8 @@ function Host({ script, setScript }) {
 - `disabled`、`dark`、`className`
 
 **HUD(顶栏)**
+- `onTitleChange?(next: string)`：顶栏左侧常驻**剧本标题**(取 `value.title`)。传了它,标题变**点击即改**;不传则只读展示(`value.title` 为空时不显示)。包**不碰存储**——拿到新标题宿主自己持久化(可 `onEdit(p => ({...p, title}))` 写回 `script.json`,或另调重命名接口)。`0.1.16+`
+- `topBarActions?: ReactNode`：顶栏**右侧**(格式切换/撤销重做旁)的**宿主注入槽**,放 stage 级业务按钮(如「删除剧本」「查看中间产物」)。包只渲染传入节点、零业务。`0.1.16+`
 - `saveStatus`：`"idle" | "saving" | "saved" | "error"`
 - `canUndo` / `canRedo` / `onUndo` / `onRedo` —— **Cmd/Ctrl+Z 撤销、Cmd/Ctrl+Shift+Z(或 Ctrl+Y)重做 已内建**(输入框内放行原生撤回),宿主**不要再自己接键盘监听**,否则会双触发(撤销两步)。`0.1.2+`
 

package/dist/index.d.ts

@@ -488,6 +488,14 @@ interface ScriptEditorProps extends ScriptEditorAdapters {
     disabled?: boolean;
     className?: string;
     dark?: boolean;
+    /** when provided, the script title (value.title) becomes click-to-edit in the
+     *  top bar; the host persists the new value (the editor never touches storage,
+     *  matching the value + onEdit contract — just one more delegated hook). Omit →
+     *  the title shows read-only (or nothing when value.title is empty). */
+    onTitleChange?: (next: string) => void;
+    /** host-injected actions for the top bar's right edge (e.g. 删除剧本 /
+     *  查看中间产物). The package only renders the node — all business stays host-side. */
+    topBarActions?: React.ReactNode;
     saveStatus?: SaveStatus;
     canUndo?: boolean;
     canRedo?: boolean;
@@ -504,7 +512,7 @@ interface ScriptEditorProps extends ScriptEditorAdapters {
      *  scroll position across editor unmount/remount (tab switch / project nav). */
     scrollScopeKey?: string;
 }
-declare function ScriptEditor({ value, onEdit, selection: controlledSelection, onSelectionChange, format: controlledFormat, onFormatChange, disabled, className, dark, saveStatus, canUndo, canRedo, onUndo, onRedo, onEditingChange, referenceFocusRequest, scrollScopeKey, diff, asset, onAddChatReferences, onRequestAssetDelete, }: ScriptEditorProps): react.JSX.Element;
+declare function ScriptEditor({ value, onEdit, selection: controlledSelection, onSelectionChange, format: controlledFormat, onFormatChange, disabled, className, dark, onTitleChange, topBarActions, saveStatus, canUndo, canRedo, onUndo, onRedo, onEditingChange, referenceFocusRequest, scrollScopeKey, diff, asset, onAddChatReferences, onRequestAssetDelete, }: ScriptEditorProps): react.JSX.Element;
 
 /**
  * Pure ScriptProject mutations.

package/dist/index.js

@@ -608,6 +608,169 @@ function EntityGroup({
     )) : null
   ] });
 }
+var EditingSignalContext = createContext(null);
+var LIVE_COMMIT_MS = 400;
+function caretOffsetFromPoint(x, y) {
+  const d = document;
+  if (typeof d.caretRangeFromPoint === "function") {
+    const r = d.caretRangeFromPoint(x, y);
+    return r ? r.startOffset : null;
+  }
+  if (typeof d.caretPositionFromPoint === "function") {
+    const p = d.caretPositionFromPoint(x, y);
+    return p ? p.offset : null;
+  }
+  return null;
+}
+function EditableText({
+  value,
+  onSave,
+  placeholder,
+  multiline = false,
+  disabled = false,
+  className,
+  autoEdit = false,
+  onEditEnd,
+  spanProps
+}) {
+  const [editing, setEditing] = useState(autoEdit);
+  const [draft, setDraft] = useState(value);
+  const caretRef = useRef(null);
+  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();
+    return () => editingSignal.dec();
+  }, [editing, editingSignal]);
+  useEffect(() => {
+    if (value === committedRef.current) return;
+    const userDiverged = editing && draft !== committedRef.current;
+    if (userDiverged) return;
+    setDraft(value);
+    committedRef.current = value;
+  }, [value, editing, draft]);
+  useEffect(() => {
+    if (autoEdit) setEditing(true);
+  }, [autoEdit]);
+  useLayoutEffect(() => {
+    if (!editing) return;
+    const el = inputRef.current;
+    if (!el) return;
+    if (multiline) autoSize(el);
+    el.focus();
+    const caret = caretRef.current;
+    const pos = caret == null ? el.value.length : Math.min(caret, el.value.length);
+    try {
+      el.setSelectionRange(pos, pos);
+    } catch {
+    }
+    caretRef.current = null;
+  }, [editing, multiline]);
+  function beginEdit(e) {
+    if (disabled) return;
+    const sel = window.getSelection();
+    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) {
+      committedRef.current = draft;
+      onSave(draft);
+    }
+  }
+  function cancel() {
+    clearLiveTimer();
+    setDraft(committedRef.current);
+    draftRef.current = committedRef.current;
+    setEditing(false);
+    onEditEnd?.();
+  }
+  if (!editing) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...spanProps,
+        className: "lj-se-editable" + (className ? " " + className : "") + (disabled ? " lj-se-editable--ro" : ""),
+        onClick: beginEdit,
+        children: value || /* @__PURE__ */ jsx("span", { className: "lj-se-ph", children: placeholder ?? "" })
+      }
+    );
+  }
+  const common = {
+    ref: inputRef,
+    value: draft,
+    className: "lj-se-editing" + (className ? " " + className : ""),
+    onChange: (e) => {
+      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) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      } else if (e.key === "Enter") {
+        if (!multiline || e.metaKey || e.ctrlKey) {
+          e.preventDefault();
+          commit();
+        }
+      }
+    }
+  };
+  return multiline ? /* @__PURE__ */ jsx("textarea", { ...common, rows: 1 }) : /* @__PURE__ */ jsx("input", { ...common, type: "text" });
+}
+function autoSize(el) {
+  el.style.height = "auto";
+  el.style.height = el.scrollHeight + "px";
+}
 function FormatToggle({
   value,
   onChange
@@ -628,22 +791,43 @@ function FormatToggle({
   )) });
 }
 function CanvasTopBar({
+  title,
+  onTitleChange,
+  titleDisabled,
   contextLabel,
   format,
   onFormatChange,
   canUndo,
   canRedo,
   onUndo,
-  onRedo
+  onRedo,
+  actions
 }) {
+  const hasTitle = onTitleChange != null || (title ?? "").length > 0;
   return /* @__PURE__ */ jsxs("header", { className: "lj-se-topbar", children: [
-    /* @__PURE__ */ jsx("div", { className: "lj-se-topbar-left", children: contextLabel }),
+    /* @__PURE__ */ jsxs("div", { className: "lj-se-topbar-left", children: [
+      hasTitle ? onTitleChange ? /* @__PURE__ */ jsx(
+        EditableText,
+        {
+          className: "lj-se-topbar-title",
+          value: title ?? "",
+          placeholder: "\u672A\u547D\u540D\u5267\u672C",
+          disabled: titleDisabled,
+          onSave: onTitleChange
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "lj-se-topbar-title lj-se-topbar-title--ro", children: title }) : null,
+      contextLabel ? /* @__PURE__ */ jsxs("span", { className: "lj-se-topbar-ctx", children: [
+        hasTitle ? /* @__PURE__ */ jsx("span", { className: "lj-se-topbar-sep", "aria-hidden": true, children: "/" }) : null,
+        contextLabel
+      ] }) : null
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "lj-se-topbar-right", children: [
       /* @__PURE__ */ jsx(FormatToggle, { value: format, onChange: onFormatChange }),
       onUndo || onRedo ? /* @__PURE__ */ jsxs("div", { className: "lj-se-topbar-undo", children: [
         /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-rowbtn", disabled: !canUndo, title: "\u64A4\u9500", onClick: onUndo, children: /* @__PURE__ */ jsx(Undo2, { className: "lj-se-ic-4", strokeWidth: 1.75 }) }),
         /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-rowbtn", disabled: !canRedo, title: "\u91CD\u505A", onClick: onRedo, children: /* @__PURE__ */ jsx(Redo2, { className: "lj-se-ic-4", strokeWidth: 1.75 }) })
-      ] }) : null
+      ] }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { className: "lj-se-topbar-actions", children: actions }) : null
     ] })
   ] });
 }
@@ -2014,169 +2198,6 @@ function getActorCueVar(actorId, tone = "dialogue") {
   const idx = hashActorId(id) % PALETTE_SIZE + 1;
   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") {
-    const r = d.caretRangeFromPoint(x, y);
-    return r ? r.startOffset : null;
-  }
-  if (typeof d.caretPositionFromPoint === "function") {
-    const p = d.caretPositionFromPoint(x, y);
-    return p ? p.offset : null;
-  }
-  return null;
-}
-function EditableText({
-  value,
-  onSave,
-  placeholder,
-  multiline = false,
-  disabled = false,
-  className,
-  autoEdit = false,
-  onEditEnd,
-  spanProps
-}) {
-  const [editing, setEditing] = useState(autoEdit);
-  const [draft, setDraft] = useState(value);
-  const caretRef = useRef(null);
-  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();
-    return () => editingSignal.dec();
-  }, [editing, editingSignal]);
-  useEffect(() => {
-    if (value === committedRef.current) return;
-    const userDiverged = editing && draft !== committedRef.current;
-    if (userDiverged) return;
-    setDraft(value);
-    committedRef.current = value;
-  }, [value, editing, draft]);
-  useEffect(() => {
-    if (autoEdit) setEditing(true);
-  }, [autoEdit]);
-  useLayoutEffect(() => {
-    if (!editing) return;
-    const el = inputRef.current;
-    if (!el) return;
-    if (multiline) autoSize(el);
-    el.focus();
-    const caret = caretRef.current;
-    const pos = caret == null ? el.value.length : Math.min(caret, el.value.length);
-    try {
-      el.setSelectionRange(pos, pos);
-    } catch {
-    }
-    caretRef.current = null;
-  }, [editing, multiline]);
-  function beginEdit(e) {
-    if (disabled) return;
-    const sel = window.getSelection();
-    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) {
-      committedRef.current = draft;
-      onSave(draft);
-    }
-  }
-  function cancel() {
-    clearLiveTimer();
-    setDraft(committedRef.current);
-    draftRef.current = committedRef.current;
-    setEditing(false);
-    onEditEnd?.();
-  }
-  if (!editing) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ...spanProps,
-        className: "lj-se-editable" + (className ? " " + className : "") + (disabled ? " lj-se-editable--ro" : ""),
-        onClick: beginEdit,
-        children: value || /* @__PURE__ */ jsx("span", { className: "lj-se-ph", children: placeholder ?? "" })
-      }
-    );
-  }
-  const common = {
-    ref: inputRef,
-    value: draft,
-    className: "lj-se-editing" + (className ? " " + className : ""),
-    onChange: (e) => {
-      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) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        cancel();
-      } else if (e.key === "Enter") {
-        if (!multiline || e.metaKey || e.ctrlKey) {
-          e.preventDefault();
-          commit();
-        }
-      }
-    }
-  };
-  return multiline ? /* @__PURE__ */ jsx("textarea", { ...common, rows: 1 }) : /* @__PURE__ */ jsx("input", { ...common, type: "text" });
-}
-function autoSize(el) {
-  el.style.height = "auto";
-  el.style.height = el.scrollHeight + "px";
-}
 function formatStateChangeLabels(item, actorMap, locationMap, propMap) {
   const labels = (item.state_changes ?? []).map((change) => {
     const kind = change.target_kind?.trim() || "actor";
@@ -3752,6 +3773,8 @@ function ScriptEditor({
   disabled = false,
   className,
   dark,
+  onTitleChange,
+  topBarActions,
   saveStatus = "idle",
   canUndo,
   canRedo,
@@ -3926,13 +3949,17 @@ function ScriptEditor({
       /* @__PURE__ */ jsx(
         CanvasTopBar,
         {
+          title: value.title,
+          onTitleChange: disabled ? void 0 : onTitleChange,
+          titleDisabled: disabled,
           contextLabel,
           format,
           onFormatChange: setFormat,
           canUndo,
           canRedo,
           onUndo,
-          onRedo
+          onRedo,
+          actions: topBarActions
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "lj-se-canvas", ref: canvasRef, children: [
@@ -3990,7 +4017,7 @@ function buildContextLabel(value, selection) {
       ] });
     }
   }
-  return /* @__PURE__ */ jsx("span", { className: "lj-se-ctx-kicker", children: "\u5267\u672C" });
+  return null;
 }
 function Ctx({ kicker, name }) {
   return /* @__PURE__ */ jsxs("span", { className: "lj-se-ctx", children: [