@vishu1301/script-writing 0.4.5 → 0.4.7

package/README.md

@@ -1,16 +1,18 @@
 # Script Writing Editor
 
-A modern, React-based script and screenplay writing component for the web.
+An advanced, React and Next.js-based script and screenplay writing component for the web. 
 
-This component provides writers with an intuitive and distraction-free environment to draft, edit, and format their scripts seamlessly within any React or Next.js application.
+This component provides writers with an intuitive, distraction-free environment to draft, edit, and format their scripts according to industry standards, seamlessly integrated into any React or Next.js application.
 
 ## Features
 
-- **Distraction-Free Editor:** Focus on your story without cluttered UI.
-- **Auto-Formatting:** Automatically formats text to industry-standard screenplay guidelines (e.g., Scene Headings, Action, Character, Dialogue).
-- **Headless Logic:** Core editor logic (`useScreenplayEditor` hook) is separated from the view for customizability.
-- **Responsive Design:** Write on the go, works across desktop and mobile devices.
-- **Event-Driven:** Provides callbacks to handle saving, exporting to PDF, or syncing with the cloud.
+- **Industry-Standard Formatting:** Automatically formats text to screenplay guidelines including Scene Headings, Action, Character, Parenthetical, Dialogue, and Transitions.
+- **Smart Auto-Suggestions:** Intelligently suggests previously used Characters, Locations, and Character Extensions (like V.O., O.S.) as you type.
+- **PDF Import & Export:** Built-in tools to import and parse existing scripts from PDFs (`pdfjs-dist`) and export your drafts into perfectly formatted screenplay PDFs (`jsPDF`).
+- **Scene Management:** Easily toggle Scene Types (INT./EXT.) and Time of Day (DAY/NIGHT) alongside Scene Numbering features.
+- **Keyboard Shortcuts:** Fluid writing experience using keyboard shortcuts (e.g., `Ctrl + ↑/↓` to change block types, `Enter` to create new blocks).
+- **Headless Architecture:** Core logic is exposed via the `useScreenplayEditor` hook, allowing complete customizability over the UI.
+
 
 ## Installation
 

package/dist/index.cjs

@@ -161,45 +161,107 @@ function PdfImporter({ onScriptImported, children }) {
     setIsProcessing(true);
     setError(null);
     try {
-      const arrayBuffer = await file.arrayBuffer();
-      const pdf = await pdfjs__namespace.getDocument(arrayBuffer).promise;
-      const processPage = async (pageNumber) => {
-        const page = await pdf.getPage(pageNumber);
-        const content = await page.getTextContent();
-        const items = content.items.filter((item) => "str" in item && item.str.trim().length > 0);
-        if (items.length === 0) return "";
-        const lines = [];
-        for (const item of items) {
-          let found = false;
-          for (const line of lines) {
-            if (Math.abs(line.y - item.transform[5]) < 5) {
-              line.items.push({ x: item.transform[4], text: item.str });
-              found = true;
+      if (file.name.toLowerCase().endsWith(".sbx")) {
+        let text = await file.text();
+        if (text.includes("&lt;div")) {
+          const textarea = document.createElement("textarea");
+          textarea.innerHTML = text;
+          text = textarea.value;
+        }
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(text, "text/html");
+        const divs = Array.from(doc.querySelectorAll("div"));
+        const preParsedBlocks = [];
+        const typeMap = {
+          divtype0: "SCENE_HEADING",
+          divtype2: "ACTION",
+          divtype3: "CHARACTER",
+          divtype4: "PARENTHETICAL",
+          divtype5: "DIALOGUE",
+          divtype6: "TRANSITION"
+        };
+        divs.forEach((div) => {
+          var _a2;
+          let divText = ((_a2 = div.textContent) == null ? void 0 : _a2.trim()) || "";
+          if (!divText) return;
+          let type = "ACTION";
+          for (const className of Array.from(div.classList)) {
+            if (typeMap[className]) {
+              type = typeMap[className];
               break;
             }
           }
-          if (!found) {
-            lines.push({ y: item.transform[5], items: [{ x: item.transform[4], text: item.str }] });
+          const block = { type, text: divText };
+          if (type === "SCENE_HEADING") {
+            const sceneNum = div.getAttribute("data-scene");
+            if (sceneNum) block.sceneNumber = sceneNum;
+            let parsedText = divText;
+            const typeMatch = parsedText.match(/^(INT\/EXT|INT|EXT)\.?\s+/i);
+            if (typeMatch) {
+              let sType = typeMatch[1].toUpperCase();
+              if (!sType.endsWith(".")) sType += ".";
+              block.sceneType = sType;
+              parsedText = parsedText.substring(typeMatch[0].length).trim();
+            }
+            const timeMatch = parsedText.match(/\s+-\s+([^-]+)$/);
+            if (timeMatch) {
+              block.timeOfDay = timeMatch[1].trim().toUpperCase();
+              parsedText = parsedText.substring(0, timeMatch.index).trim();
+            }
+            block.text = parsedText;
           }
+          preParsedBlocks.push(block);
+        });
+        const title = file.name.replace(/\.sbx$/i, "");
+        onScriptImported(title.trim(), "", preParsedBlocks);
+      } else {
+        const arrayBuffer = await file.arrayBuffer();
+        const pdf = await pdfjs__namespace.getDocument(arrayBuffer).promise;
+        const processPage = async (pageNumber) => {
+          const page = await pdf.getPage(pageNumber);
+          const content = await page.getTextContent();
+          const items = content.items.filter(
+            (item) => "str" in item && item.str.trim().length > 0
+          );
+          if (items.length === 0) return "";
+          const lines = [];
+          for (const item of items) {
+            let found = false;
+            for (const line of lines) {
+              if (Math.abs(line.y - item.transform[5]) < 5) {
+                line.items.push({ x: item.transform[4], text: item.str });
+                found = true;
+                break;
+              }
+            }
+            if (!found) {
+              lines.push({
+                y: item.transform[5],
+                items: [{ x: item.transform[4], text: item.str }]
+              });
+            }
+          }
+          lines.sort((a, b) => b.y - a.y);
+          return lines.map((line) => {
+            line.items.sort((a, b) => a.x - b.x);
+            return line.items.map((item) => item.text).join(" ");
+          }).join("\n");
+        };
+        let title = "";
+        if (pdf.numPages > 0) {
+          title = await processPage(1);
         }
-        lines.sort((a, b) => b.y - a.y);
-        return lines.map((line) => {
-          line.items.sort((a, b) => a.x - b.x);
-          return line.items.map((item) => item.text).join(" ");
-        }).join("\n");
-      };
-      let title = "";
-      if (pdf.numPages > 0) {
-        title = await processPage(1);
-      }
-      let scriptContent = "";
-      for (let i = 2; i <= pdf.numPages; i++) {
-        scriptContent += await processPage(i) + "\n\n";
+        let scriptContent = "";
+        for (let i = 2; i <= pdf.numPages; i++) {
+          scriptContent += await processPage(i) + "\n\n";
+        }
+        onScriptImported(title.trim(), scriptContent);
       }
-      onScriptImported(title.trim(), scriptContent);
     } catch (err) {
       console.error("Error processing PDF:", err);
-      setError(err instanceof Error ? `Error processing PDF: ${err.message}` : "An unknown error occurred.");
+      setError(
+        err instanceof Error ? `Error processing PDF: ${err.message}` : "An unknown error occurred."
+      );
     } finally {
       setIsProcessing(false);
       if (event.target) {
@@ -217,7 +279,7 @@ function PdfImporter({ onScriptImported, children }) {
       {
         ref: fileInputRef,
         type: "file",
-        accept: "application/pdf",
+        accept: ".pdf,.sbx,application/pdf",
         onChange: handleFileChange,
         disabled: isProcessing,
         className: "hidden",
@@ -230,7 +292,7 @@ function PdfImporter({ onScriptImported, children }) {
         onClick: handleClick,
         disabled: isProcessing,
         className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
-        "aria-label": "Import Script from PDF",
+        "aria-label": "Import Script",
         children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Processing..." }) : children
       }
     ),
@@ -249,7 +311,6 @@ function ScreenplayEditorView({
   characterExtensions,
   locations,
   characters,
-  sceneNumbers,
   handleBlockTextChange,
   handleSceneTypeChange,
   handleTimeOfDayChange,
@@ -261,6 +322,7 @@ function ScreenplayEditorView({
   handleScriptImport,
   onSave,
   onSaveAsPdf,
+  onSaveAsSbx,
   onSyncWithCloud,
   handleSceneNumberChange
 }) {
@@ -554,6 +616,18 @@ function ScreenplayEditorView({
           ]
         }
       ),
+      onSaveAsSbx && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: onSaveAsSbx,
+          className: "flex items-center justify-center gap-2 w-auto px-4 h-12 rounded-full bg-zinc-950 text-white shadow-xl shadow-zinc-900/20 border border-white/10 hover:bg-zinc-800 hover:scale-105 active:scale-95 transition-all duration-300",
+          "aria-label": "Save Script as SBX",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcw, { className: "w-5 h-5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Save" })
+          ]
+        }
+      ),
       isRulesOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/80 backdrop-blur-md rounded-xl shadow-lg border border-zinc-200/50 p-4 text-xs text-zinc-700 select-none font-sans overflow-hidden transition-all duration-300 w-64 origin-bottom-right animate-in fade-in zoom-in-95", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-zinc-800 mb-3 text-sm", children: "Settings & Shortcuts" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-1.5", children: [
@@ -907,17 +981,6 @@ function useScreenplayEditor() {
     });
     return map;
   }, [blocks]);
-  react.useCallback(() => {
-    let count = 1;
-    setBlocks(
-      (prev) => prev.map((b) => {
-        if (b.type === "SCENE_HEADING") {
-          return __spreadProps(__spreadValues({}, b), { sceneNumber: String(count++) });
-        }
-        return b;
-      })
-    );
-  }, []);
   react.useEffect(() => {
     if (newBlockId && refs.current[newBlockId]) {
       const block = blocks.find((b) => b.id === newBlockId);
@@ -1227,8 +1290,20 @@ function useScreenplayEditor() {
     [blocks, handleBlockTextChange]
   );
   const handleScriptImport = react.useCallback(
-    (title, content) => {
-      const parsedBlocks = parseScreenplayText(content);
+    (title, content, preParsedBlocks) => {
+      let parsedBlocks = [];
+      if (preParsedBlocks && preParsedBlocks.length > 0) {
+        parsedBlocks = preParsedBlocks.map((b) => ({
+          id: uuid(),
+          type: b.type || "ACTION",
+          text: b.text || "",
+          sceneNumber: b.sceneNumber,
+          sceneType: b.sceneType,
+          timeOfDay: b.timeOfDay
+        }));
+      } else {
+        parsedBlocks = parseScreenplayText(content);
+      }
       if (parsedBlocks.length > 0) {
         let fallbackCount = 1;
         const finalizedBlocks = parsedBlocks.map((block) => {