@vishu1301/script-writing 0.3.9 → 0.4.1

package/dist/index.cjs

@@ -69,7 +69,7 @@ var blockStyles = {
   },
   CHARACTER: {
     label: "Character",
-    className: "uppercase font-bold text-zinc-900 tracking-widest",
+    className: "uppercase text-zinc-900 tracking-widest",
     inputStyle: {
       textTransform: "uppercase",
       textAlign: "left",
@@ -117,7 +117,6 @@ var blockStyles = {
     label: "Transition",
     className: "uppercase font-bold text-right text-zinc-900",
     inputStyle: {
-      marginLeft: "4.0in",
       textTransform: "uppercase",
       fontWeight: 600,
       textAlign: "right",
@@ -136,6 +135,8 @@ function ScreenplayEditorView({
   refs,
   focusedBlockId,
   showSuggestions,
+  showExtensionSuggestions,
+  characterExtensions,
   locations,
   characters,
   sceneNumbers,
@@ -143,6 +144,7 @@ function ScreenplayEditorView({
   handleSceneTypeChange,
   handleTimeOfDayChange,
   handleBlockTypeChange,
+  handleSelectCharacterExtension,
   handleKeyDown,
   handleFocus,
   handleBlur,
@@ -357,6 +359,34 @@ function ScreenplayEditorView({
                         char
                       )) })
                     }
+                  ),
+                  focusedBlockId === block.id && block.type === "CHARACTER" && showExtensionSuggestions && characterExtensions && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      role: "listbox",
+                      id: `extension-suggestions-${block.id}`,
+                      className: "absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-72 z-50 bg-white border border-slate-200 shadow-2xl shadow-slate-200/60 rounded-xl py-2 overflow-hidden animate-in fade-in zoom-in-95 duration-200",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characterExtensions.filter((ext) => {
+                        const openParenIndex = block.text.lastIndexOf("(");
+                        const query = openParenIndex > -1 ? block.text.substring(openParenIndex + 1).toUpperCase() : "";
+                        return ext.toUpperCase().includes(query);
+                      }).map((ext) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          role: "option",
+                          className: "group flex items-center px-4 py-2.5 cursor-pointer transition-colors duration-150 hover:bg-slate-50 active:bg-slate-100",
+                          onMouseDown: (e) => {
+                            e.preventDefault();
+                            handleSelectCharacterExtension(ext);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: ext }),
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3 text-slate-200 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" })
+                          ]
+                        },
+                        ext
+                      )) })
+                    }
                   )
                 ] })
               },
@@ -581,6 +611,7 @@ function useScreenplayEditor() {
   );
   const [newBlockId, setNewBlockId] = react.useState(null);
   const [showSuggestions, setShowSuggestions] = react.useState(false);
+  const [showExtensionSuggestions, setShowExtensionSuggestions] = react.useState(false);
   const blurTimeout = react.useRef(null);
   const [isPageSplitEnabled, setIsPageSplitEnabled] = react.useState(false);
   const [pageBreaks, setPageBreaks] = react.useState([]);
@@ -595,12 +626,23 @@ function useScreenplayEditor() {
     }
     setIsPageSplitEnabled((prev) => !prev);
   }, [focusedBlockId]);
+  const characterExtensions = react.useMemo(
+    () => ["(V.O.)", "(O.S.)", "(O.C.)", "(SUBTITLE)", "(CONT'D)"],
+    []
+  );
   const locations = react.useMemo(() => {
     const locs = blocks.filter((b) => b.type === "SCENE_HEADING" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
     return [...new Set(locs)];
   }, [blocks]);
   const characters = react.useMemo(() => {
-    const chars = blocks.filter((b) => b.type === "CHARACTER" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
+    const chars = blocks.filter((b) => b.type === "CHARACTER" && b.text.trim() !== "").map((b) => {
+      const text = b.text.trim().toUpperCase();
+      const parenIndex = text.indexOf("(");
+      if (parenIndex > -1) {
+        return text.substring(0, parenIndex).trim();
+      }
+      return text;
+    }).filter(Boolean);
     return [...new Set(chars)];
   }, [blocks]);
   const sceneNumbers = react.useMemo(() => {
@@ -648,6 +690,7 @@ function useScreenplayEditor() {
       if (!isInsideBlock && !isInsideToolbar && !isInsideSuggestions) {
         setFocusedBlockId("");
         setShowSuggestions(false);
+        setShowExtensionSuggestions(false);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
@@ -751,6 +794,20 @@ function useScreenplayEditor() {
     (id, text) => {
       const block = blocks.find((b) => b.id === id);
       if (!block) return;
+      if (block.type === "CHARACTER") {
+        const trimmedText = text.trim();
+        const openParenIndex = trimmedText.lastIndexOf("(");
+        const closeParenIndex = trimmedText.lastIndexOf(")");
+        if (openParenIndex !== -1 && openParenIndex > closeParenIndex) {
+          setShowExtensionSuggestions(true);
+          setShowSuggestions(false);
+        } else {
+          setShowExtensionSuggestions(false);
+          setShowSuggestions(openParenIndex === -1);
+        }
+      } else if (showExtensionSuggestions) {
+        setShowExtensionSuggestions(false);
+      }
       let processedText = text;
       if (block.type === "PARENTHETICAL") {
         const clean = text.replace(/[()]/g, "");
@@ -770,7 +827,7 @@ function useScreenplayEditor() {
         }
       }
     },
-    [blocks]
+    [blocks, showExtensionSuggestions]
   );
   const handleSceneTypeChange = react.useCallback(
     (id, sceneType) => {
@@ -815,6 +872,35 @@ function useScreenplayEditor() {
     },
     [focusedBlockId]
   );
+  const handleSelectCharacterExtension = react.useCallback(
+    (extension) => {
+      if (!focusedBlockId) return;
+      setBlocks((currentBlocks) => {
+        const block = currentBlocks.find((b) => b.id === focusedBlockId);
+        if (!block || block.type !== "CHARACTER") return currentBlocks;
+        const parenIndex = block.text.indexOf("(");
+        const baseText = (parenIndex > -1 ? block.text.substring(0, parenIndex) : block.text).trim();
+        const newText = `${baseText} ${extension}`;
+        const newBlocks = updateBlock(
+          currentBlocks,
+          focusedBlockId,
+          "text",
+          newText
+        );
+        setTimeout(() => {
+          const el = refs.current[focusedBlockId];
+          if (el) {
+            el.innerText = newText;
+            el.focus();
+            setCaretPosition(el, newText.length);
+          }
+        }, 0);
+        return newBlocks;
+      });
+      setShowExtensionSuggestions(false);
+    },
+    [focusedBlockId]
+  );
   const focusBlock = (id, position = "start") => {
     const el = refs.current[id];
     if (!el) return;
@@ -977,11 +1063,29 @@ function useScreenplayEditor() {
       clearTimeout(blurTimeout.current);
     }
     setFocusedBlockId(id);
-    setShowSuggestions(true);
-  }, []);
+    const block = blocks.find((b) => b.id === id);
+    if ((block == null ? void 0 : block.type) === "CHARACTER") {
+      const trimmedText = block.text.trim();
+      const openParenIndex = trimmedText.lastIndexOf("(");
+      const closeParenIndex = trimmedText.lastIndexOf(")");
+      if (openParenIndex !== -1 && openParenIndex > closeParenIndex) {
+        setShowExtensionSuggestions(true);
+        setShowSuggestions(false);
+      } else {
+        setShowExtensionSuggestions(false);
+        setShowSuggestions(openParenIndex === -1);
+      }
+    } else {
+      setShowSuggestions(true);
+      setShowExtensionSuggestions(false);
+    }
+  }, [blocks]);
   const handleBlur = react.useCallback((id) => {
     if (document.activeElement === refs.current[id]) return;
-    blurTimeout.current = setTimeout(() => setShowSuggestions(false), 200);
+    blurTimeout.current = setTimeout(() => {
+      setShowSuggestions(false);
+      setShowExtensionSuggestions(false);
+    }, 200);
   }, []);
   return {
     blocks,
@@ -991,6 +1095,8 @@ function useScreenplayEditor() {
     refs,
     focusedBlockId,
     showSuggestions,
+    showExtensionSuggestions,
+    characterExtensions,
     locations,
     characters,
     sceneNumbers,
@@ -998,6 +1104,7 @@ function useScreenplayEditor() {
     handleSceneTypeChange,
     handleTimeOfDayChange,
     handleBlockTypeChange,
+    handleSelectCharacterExtension,
     handleKeyDown,
     handleFocus,
     handleBlur