@vishu1301/script-writing 0.3.7 → 0.3.9

package/dist/index.cjs

@@ -48,6 +48,7 @@ var blockStyles = {
     inputStyle: {
       textTransform: "uppercase",
       fontWeight: 700,
+      maxWidth: "6.0in",
       outline: "none",
       whiteSpace: "pre-wrap",
       overflowWrap: "break-word",
@@ -56,21 +57,24 @@ var blockStyles = {
   },
   ACTION: {
     label: "Action",
-    className: "text-zinc-800 leading-relaxed",
+    className: "text-zinc-800",
     inputStyle: {
+      maxWidth: "6.0in",
       outline: "none",
       whiteSpace: "pre-wrap",
       overflowWrap: "break-word",
       wordBreak: "break-word",
-      lineHeight: 1.7
+      lineHeight: "12pt"
     }
   },
   CHARACTER: {
     label: "Character",
-    className: "uppercase font-bold text-center text-zinc-900 tracking-widest",
+    className: "uppercase font-bold text-zinc-900 tracking-widest",
     inputStyle: {
       textTransform: "uppercase",
-      textAlign: "center",
+      textAlign: "left",
+      marginLeft: "2.0in",
+      maxWidth: "4.0in",
       fontWeight: 700,
       letterSpacing: "0.1em",
       outline: "none",
@@ -81,37 +85,39 @@ var blockStyles = {
   },
   PARENTHETICAL: {
     label: "Parenthetical",
-    className: "text-center text-zinc-600",
+    className: "text-zinc-600",
     inputStyle: {
       fontStyle: "normal",
-      maxWidth: "20rem",
-      margin: "0 auto",
+      maxWidth: "3.0in",
+      marginLeft: "1.5in",
+      textTransform: "lowercase",
       outline: "none",
       whiteSpace: "pre-wrap",
       overflowWrap: "break-word",
       wordBreak: "break-word",
-      textAlign: "center"
+      textAlign: "left"
     }
   },
   DIALOGUE: {
     label: "Dialogue",
-    className: "text-zinc-900 leading-relaxed max-w-[30rem] mx-auto",
+    className: "text-zinc-900",
     inputStyle: {
-      marginLeft: "auto",
-      marginRight: "auto",
+      marginLeft: "1.0in",
+      maxWidth: "3.5in",
       outline: "none",
       whiteSpace: "pre-wrap",
       overflowWrap: "break-word",
       wordBreak: "break-word",
       fontSize: "1.05rem",
       textAlign: "left",
-      lineHeight: 1.7
+      lineHeight: "12pt"
     }
   },
   TRANSITION: {
     label: "Transition",
     className: "uppercase font-bold text-right text-zinc-900",
     inputStyle: {
+      marginLeft: "4.0in",
       textTransform: "uppercase",
       fontWeight: 600,
       textAlign: "right",
@@ -187,7 +193,7 @@ function ScreenplayEditorView({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: pages.map((pageBlocks, pageIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 ring-1 ring-zinc-200/50 rounded-sm md:rounded-md p-16 md:p-20 flex flex-col w-[210mm] min-h-[297mm] shrink-0",
+        className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 ring-1 ring-zinc-200/50 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-[297mm] shrink-0",
         style: {
           fontFamily: "var(--font-courier-prime, 'Courier New', Courier, monospace)"
         },
@@ -229,7 +235,7 @@ function ScreenplayEditorView({
                         "aria-haspopup": "listbox",
                         "aria-expanded": focusedBlockId === block.id && showSuggestions && locations.length > 0,
                         spellCheck: false,
-                        className: "min-w-[5rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
+                        className: "min-w-[3rem] py-1 outline-none text-base font-bold uppercase tracking-widest break-all bg-transparent",
                         onInput: (e) => handleBlockTextChange(
                           block.id,
                           e.target.innerText
@@ -468,6 +474,8 @@ function createNewBlock(type) {
   if (type === "SCENE_HEADING") {
     newBlock.sceneType = "INT.";
     newBlock.timeOfDay = "DAY";
+  } else if (type === "PARENTHETICAL") {
+    newBlock.text = "()";
   }
   return newBlock;
 }
@@ -607,13 +615,22 @@ function useScreenplayEditor() {
     return map;
   }, [blocks]);
   react.useEffect(() => {
-    var _a;
     if (newBlockId && refs.current[newBlockId]) {
-      (_a = refs.current[newBlockId]) == null ? void 0 : _a.focus();
+      const block = blocks.find((b) => b.id === newBlockId);
+      const el = refs.current[newBlockId];
+      if (el && block) {
+        el.focus();
+        el.innerText = block.text;
+        if (block.type === "PARENTHETICAL") {
+          setTimeout(() => setCaretPosition(el, 1), 0);
+        } else {
+          setTimeout(() => setCaretPosition(el, block.text.length), 0);
+        }
+      }
       setFocusedBlockId(newBlockId);
       setNewBlockId(null);
     }
-  }, [newBlockId]);
+  }, [newBlockId, blocks]);
   react.useEffect(() => {
     blocks.forEach((block) => {
       const element = refs.current[block.id];
@@ -622,6 +639,22 @@ function useScreenplayEditor() {
       }
     });
   }, [blocks, isPageSplitEnabled, pageBreaks]);
+  react.useEffect(() => {
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      const isInsideBlock = target.closest("[data-block-id]");
+      const isInsideToolbar = target.closest(".sticky");
+      const isInsideSuggestions = target.closest('[role="listbox"]');
+      if (!isInsideBlock && !isInsideToolbar && !isInsideSuggestions) {
+        setFocusedBlockId("");
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
   react.useEffect(() => {
     if (!isPageSplitEnabled) {
       setPageBreaks([]);
@@ -714,9 +747,31 @@ function useScreenplayEditor() {
       focusStateRef.current = null;
     }
   }, [pages]);
-  const handleBlockTextChange = react.useCallback((id, text) => {
-    setBlocks((bs) => updateBlock(bs, id, "text", text));
-  }, []);
+  const handleBlockTextChange = react.useCallback(
+    (id, text) => {
+      const block = blocks.find((b) => b.id === id);
+      if (!block) return;
+      let processedText = text;
+      if (block.type === "PARENTHETICAL") {
+        const clean = text.replace(/[()]/g, "");
+        processedText = `(${clean})`;
+      }
+      setBlocks(
+        (bs) => updateBlock(bs, id, "text", processedText)
+      );
+      if (text !== processedText) {
+        const el = refs.current[id];
+        if (el) {
+          const offset = getCaretCharacterOffsetWithin(el);
+          const charsBeforeCaret = text.substring(0, offset).replace(/[()]/g, "").length;
+          const newOffset = 1 + charsBeforeCaret;
+          el.innerText = processedText;
+          setCaretPosition(el, newOffset);
+        }
+      }
+    },
+    [blocks]
+  );
   const handleSceneTypeChange = react.useCallback(
     (id, sceneType) => {
       setBlocks(
@@ -747,8 +802,14 @@ function useScreenplayEditor() {
       setTimeout(() => {
         const el = refs.current[focusedBlockId];
         if (el) {
-          el.innerText = "";
           el.focus();
+          const newBlock = createNewBlock(newType);
+          el.innerText = newBlock.text;
+          if (newType === "PARENTHETICAL") {
+            setCaretPosition(el, 1);
+          } else {
+            setCaretPosition(el, newBlock.text.length);
+          }
         }
       }, 0);
     },
@@ -767,19 +828,44 @@ function useScreenplayEditor() {
     sel.addRange(range);
   };
   const cycleBlockType = (id, direction) => {
-    setBlocks((bs) => {
-      const block = bs.find((b) => b.id === id);
-      if (!block) return bs;
-      const idx = blockTypes.indexOf(block.type);
-      let newIdx = direction === "up" ? idx - 1 : idx + 1;
-      if (newIdx < 0) newIdx = blockTypes.length - 1;
-      if (newIdx >= blockTypes.length) newIdx = 0;
-      return updateBlock(bs, id, "type", blockTypes[newIdx]);
-    });
+    const block = blocks.find((b) => b.id === id);
+    if (!block) return;
+    const idx = blockTypes.indexOf(block.type);
+    let newIdx = direction === "up" ? idx - 1 : idx + 1;
+    if (newIdx < 0) newIdx = blockTypes.length - 1;
+    if (newIdx >= blockTypes.length) newIdx = 0;
+    const newType = blockTypes[newIdx];
+    setBlocks((bs) => changeBlockType(bs, id, newType));
+    setTimeout(() => {
+      const el = refs.current[id];
+      if (el) {
+        el.focus();
+        const newBlock = createNewBlock(newType);
+        el.innerText = newBlock.text;
+        if (newType === "PARENTHETICAL") {
+          setCaretPosition(el, 1);
+        } else {
+          setCaretPosition(el, el.innerText.length);
+        }
+      }
+    }, 10);
   };
   const handleKeyDown = react.useCallback(
     (e, id, text) => {
       var _a;
+      const block = blocks.find((b) => b.id === id);
+      if ((block == null ? void 0 : block.type) === "PARENTHETICAL") {
+        const offset = getCaretCharacterOffsetWithin(e.currentTarget);
+        if (e.key === "Backspace" && (offset <= 1 || text === "()")) {
+          e.preventDefault();
+          cycleBlockType(id, "up");
+          return;
+        }
+        if (e.key === "Delete" && (offset >= text.length - 1 || text === "()")) {
+          e.preventDefault();
+          return;
+        }
+      }
       if ((e.key === "Backspace" || e.key === "Delete") && text.length <= 1) {
         e.preventDefault();
         const { newBlocks, nextFocusedId } = deleteBlock(
@@ -805,11 +891,9 @@ function useScreenplayEditor() {
       } else if (e.key === "ArrowUp" && e.ctrlKey) {
         e.preventDefault();
         cycleBlockType(id, "up");
-        requestAnimationFrame(() => focusBlock(id));
       } else if (e.key === "ArrowDown" && e.ctrlKey) {
         e.preventDefault();
         cycleBlockType(id, "down");
-        requestAnimationFrame(() => focusBlock(id));
       } else if (e.key === "ArrowUp" && !e.ctrlKey) {
         const selection = window.getSelection();
         if (!selection || !selection.isCollapsed || selection.rangeCount === 0) {
@@ -886,7 +970,7 @@ function useScreenplayEditor() {
         }
       }
     },
-    [blocks]
+    [blocks, handleBlockTextChange]
   );
   const handleFocus = react.useCallback((id) => {
     if (blurTimeout.current) {