@vishu1301/script-writing 1.0.1 → 1.0.3

package/dist/index.cjs

@@ -331,10 +331,10 @@ function ScreenplayEditorView({
   handleSceneNumberChange
 }) {
   const [isRulesOpen, setIsRulesOpen] = react.useState(false);
-  const screenplayFont = "'Courier Prime', Courier, monospace";
+  const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
   react.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;
@@ -346,15 +346,18 @@ function ScreenplayEditorView({
       const style = document.createElement("style");
       style.id = styleId;
       style.textContent = `
-        .font-screenplay-container, 
-        .font-screenplay-container *,
-        .font-screenplay-container [contenteditable] {
-          font-family: ${screenplayFont} !important;
+        /* 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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.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;
@@ -397,15 +400,16 @@ function ScreenplayEditorView({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(