@vishu1301/script-writing 1.0.2 → 1.0.4

package/dist/index.js

@@ -306,10 +306,10 @@ function ScreenplayEditorView({
   handleSceneNumberChange
 }) {
   const [isRulesOpen, setIsRulesOpen] = useState(false);
-  const screenplayFont = "'Courier Prime', Courier, monospace";
+  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
   useEffect(() => {
     const fontId = "google-font-courier-prime";
-    const styleId = "screenplay-editor-force-font";
+    const styleId = "screenplay-editor-force-v4";
     if (!document.getElementById(fontId)) {
       const link = document.createElement("link");
       link.id = fontId;
@@ -320,70 +320,80 @@ function ScreenplayEditorView({
     if (!document.getElementById(styleId)) {
       const style = document.createElement("style");
       style.id = styleId;
-      style.textContent = style.textContent = `
-      [data-screenplay-editor], 
-      [data-screenplay-editor] *, 
-      [data-screenplay-editor] [contenteditable="true"],
-      .font-screenplay-container,
-      .font-screenplay-container div,
-      .font-screenplay-container span {
-        font-family: 'Courier Prime', Courier, monospace !important;
-      }
-    `;
+      style.textContent = `
+        /* We target by the data-attribute to ensure the highest specificity possible */
+        [data-screenplay-editor] *, 
+        [data-screenplay-editor] div, 
+        [data-screenplay-editor] span, 
+        [data-screenplay-editor] [contenteditable="true"] {
+          font-family: ${COURIER_STACK} !important;
+          -webkit-font-smoothing: antialiased;
+        }
+      `;
       document.head.appendChild(style);
     }
-  }, [screenplayFont]);
+  }, [COURIER_STACK]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "sticky top-6 z-50 bg-white backdrop-blur-xl border border-white/10 rounded-full shadow-2xl flex gap-1 max-w-fit p-1.5 mb-12 select-none overflow-x-auto custom-scrollbar", children: blockTypes.map((type) => {
-      var _a;
-      const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: `flex items-center gap-2 px-4 py-2.5 rounded-full font-medium text-sm transition-all duration-300 ${selected ? "bg-zinc-900 text-white shadow-sm" : "text-zinc-400 hover:bg-zinc-800/10 hover:text-zinc-800"}`,
-          onClick: () => handleBlockTypeChange(type),
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: "blockType",
-                id: `block-type-${type}`,
-                className: "sr-only",
-                "aria-label": blockStyles[type].label,
-                checked: selected,
-                readOnly: true
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "label",
-              {
-                htmlFor: `block-type-${type}`,
-                className: "flex items-center gap-2 cursor-pointer",
-                children: [
-                  icons[type],
-                  /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
-                ]
-              }
-            )
-          ]
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "sticky top-6 z-50 bg-white backdrop-blur-xl border border-white/10 rounded-full shadow-2xl flex gap-1 p-1.5 mb-12 select-none overflow-x-auto custom-scrollbar",
+        style: {
+          maxWidth: "1024px"
         },
-        type
-      );
-    }) }),
+        children: blockTypes.map((type) => {
+          var _a;
+          const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `flex items-center gap-2 px-4 py-2.5 rounded-full font-medium text-sm transition-all duration-300 ${selected ? "bg-zinc-900 text-white shadow-sm" : "text-zinc-400 hover:bg-zinc-800/10 hover:text-zinc-800"}`,
+              onClick: () => handleBlockTypeChange(type),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "blockType",
+                    id: `block-type-${type}`,
+                    className: "sr-only",
+                    "aria-label": blockStyles[type].label,
+                    checked: selected,
+                    readOnly: true
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    htmlFor: `block-type-${type}`,
+                    className: "flex items-center gap-2 cursor-pointer",
+                    children: [
+                      icons[type],
+                      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
+                    ]
+                  }
+                )
+              ]
+            },
+            type
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-[297mm] shrink-0 font-screenplay-container",
+        className: "relative bg-[#fdfdfc] shadow-2xl shadow-zinc-300/60 border border-zinc-100 rounded-sm md:rounded-md pl-[1.5in] py-[1in] pr-[1in] flex flex-col w-[210mm] min-h-[297mm] shrink-0",
         style: {
-          fontFamily: screenplayFont,
+          fontFamily: COURIER_STACK,
           paddingLeft: "1.5in",
           paddingRight: "1in",
           paddingTop: "1in",
           paddingBottom: "1in",
           lineHeight: "1.2"
         },
+        "data-screenplay-editor": "true",
         children: blocks.map((block) => {
           var _a, _b;
           return /* @__PURE__ */ jsx(