@vishu1301/script-writing 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -4
- package/dist/index.cjs +534 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +71 -5
- package/dist/index.d.ts +71 -5
- package/dist/index.js +533 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
|
|
2
|
-
import { ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, ArrowRight, User, ChevronRight, Upload, Save, FileDown, RefreshCcw, Cog } from 'lucide-react';
|
|
2
|
+
import { ArrowRightLeft, MessageCircle, Brackets, UserRound, Sparkles, Clapperboard, ArrowRight, User, ChevronRight, Upload, Save, FileDown, RefreshCcw, Cog, Loader2, Tags } from 'lucide-react';
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import * as pdfjs from 'pdfjs-dist';
|
|
5
5
|
import jsPDF from 'jspdf';
|
|
@@ -1631,6 +1631,537 @@ var handleSaveAsSbx = (blocks, sceneNumbers, onSaveAsSbx) => {
|
|
|
1631
1631
|
}
|
|
1632
1632
|
};
|
|
1633
1633
|
|
|
1634
|
-
|
|
1634
|
+
// app/types/script-breakdown.types.tsx
|
|
1635
|
+
var CATEGORIES = [
|
|
1636
|
+
{ id: "CAST", label: "Cast", color: "#7c3aed", hex: "#8b5cf6" },
|
|
1637
|
+
{ id: "PROP", label: "Prop", color: "#ea580c", hex: "#f97316" },
|
|
1638
|
+
{ id: "COSTUME", label: "Costume", color: "#db2777", hex: "#ec4899" },
|
|
1639
|
+
{ id: "VEHICLE", label: "Vehicle", color: "#2563eb", hex: "#3b82f6" },
|
|
1640
|
+
{ id: "SET_PROP", label: "Set Prop", color: "#16a34a", hex: "#22c55e" },
|
|
1641
|
+
{ id: "EXTRA", label: "Extra", color: "#0d9488", hex: "#14b8a6" },
|
|
1642
|
+
{ id: "LOCATION", label: "Location", color: "#ca8a04", hex: "#eab308" }
|
|
1643
|
+
];
|
|
1644
|
+
function ScriptBreakdownSceneView({
|
|
1645
|
+
blocks,
|
|
1646
|
+
characters,
|
|
1647
|
+
isLoading,
|
|
1648
|
+
sceneNumber,
|
|
1649
|
+
tags,
|
|
1650
|
+
selectionMenu,
|
|
1651
|
+
handleMouseUp,
|
|
1652
|
+
addTag,
|
|
1653
|
+
removeTag,
|
|
1654
|
+
clearSelection,
|
|
1655
|
+
menuPlacement,
|
|
1656
|
+
menuRef
|
|
1657
|
+
}) {
|
|
1658
|
+
const COURIER_STACK = "'Courier Prime', 'Courier', monospace";
|
|
1659
|
+
useEffect(() => {
|
|
1660
|
+
const fontId = "google-font-courier-prime";
|
|
1661
|
+
const styleId = "screenplay-editor-force-v4";
|
|
1662
|
+
if (!document.getElementById(fontId)) {
|
|
1663
|
+
const link = document.createElement("link");
|
|
1664
|
+
link.id = fontId;
|
|
1665
|
+
link.rel = "stylesheet";
|
|
1666
|
+
link.href = "https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap";
|
|
1667
|
+
document.head.appendChild(link);
|
|
1668
|
+
}
|
|
1669
|
+
if (!document.getElementById(styleId)) {
|
|
1670
|
+
const style = document.createElement("style");
|
|
1671
|
+
style.id = styleId;
|
|
1672
|
+
style.textContent = `
|
|
1673
|
+
/* We target by the data-attribute to ensure the highest specificity possible */
|
|
1674
|
+
[data-screenplay-editor] *,
|
|
1675
|
+
[data-screenplay-editor] div,
|
|
1676
|
+
[data-screenplay-editor] span,
|
|
1677
|
+
[data-screenplay-editor] [contenteditable="true"] {
|
|
1678
|
+
font-family: ${COURIER_STACK} !important;
|
|
1679
|
+
-webkit-font-smoothing: antialiased;
|
|
1680
|
+
}
|
|
1681
|
+
`;
|
|
1682
|
+
document.head.appendChild(style);
|
|
1683
|
+
}
|
|
1684
|
+
}, [COURIER_STACK]);
|
|
1685
|
+
if (isLoading) {
|
|
1686
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [
|
|
1687
|
+
/* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin text-zinc-400" }),
|
|
1688
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 animate-pulse", children: "Loading scene details..." })
|
|
1689
|
+
] });
|
|
1690
|
+
}
|
|
1691
|
+
const hasLocationTag = tags.some((t) => t.categoryId === "LOCATION");
|
|
1692
|
+
const renderBlockText = (block) => {
|
|
1693
|
+
const blockTags = tags.filter((t) => t.blockId === block.id).sort((a, b) => a.startIndex - b.startIndex);
|
|
1694
|
+
if (blockTags.length === 0) return block.text;
|
|
1695
|
+
const nodes = [];
|
|
1696
|
+
let currentIndex = 0;
|
|
1697
|
+
blockTags.forEach((tag) => {
|
|
1698
|
+
if (tag.startIndex > currentIndex) {
|
|
1699
|
+
nodes.push(
|
|
1700
|
+
/* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex, tag.startIndex) }, `text-${currentIndex}`)
|
|
1701
|
+
);
|
|
1702
|
+
}
|
|
1703
|
+
const category = CATEGORIES.find((c) => c.id === tag.categoryId);
|
|
1704
|
+
nodes.push(
|
|
1705
|
+
/* @__PURE__ */ jsx(
|
|
1706
|
+
"span",
|
|
1707
|
+
{
|
|
1708
|
+
title: `${category == null ? void 0 : category.label} (Click to edit)`,
|
|
1709
|
+
onClick: (e) => {
|
|
1710
|
+
e.stopPropagation();
|
|
1711
|
+
const selection = window.getSelection();
|
|
1712
|
+
if (!selection) return;
|
|
1713
|
+
const range = document.createRange();
|
|
1714
|
+
const textNode = e.currentTarget.firstChild;
|
|
1715
|
+
if (textNode && textNode.nodeType === Node.TEXT_NODE) {
|
|
1716
|
+
range.selectNodeContents(textNode);
|
|
1717
|
+
} else {
|
|
1718
|
+
range.selectNodeContents(e.currentTarget);
|
|
1719
|
+
}
|
|
1720
|
+
selection.removeAllRanges();
|
|
1721
|
+
selection.addRange(range);
|
|
1722
|
+
setTimeout(() => handleMouseUp(), 0);
|
|
1723
|
+
},
|
|
1724
|
+
className: "cursor-pointer font-bold transition-opacity hover:opacity-70",
|
|
1725
|
+
style: { color: category == null ? void 0 : category.color },
|
|
1726
|
+
children: block.text.slice(tag.startIndex, tag.endIndex)
|
|
1727
|
+
},
|
|
1728
|
+
tag.id
|
|
1729
|
+
)
|
|
1730
|
+
);
|
|
1731
|
+
currentIndex = tag.endIndex;
|
|
1732
|
+
});
|
|
1733
|
+
if (currentIndex < block.text.length) {
|
|
1734
|
+
nodes.push(
|
|
1735
|
+
/* @__PURE__ */ jsx("span", { children: block.text.slice(currentIndex) }, `text-${currentIndex}`)
|
|
1736
|
+
);
|
|
1737
|
+
}
|
|
1738
|
+
return nodes;
|
|
1739
|
+
};
|
|
1740
|
+
return /* @__PURE__ */ jsx("div", { className: "p-8 md:p-12 mx-auto w-full min-h-screen flex flex-col gap-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-8 items-start", children: [
|
|
1741
|
+
/* @__PURE__ */ jsx(
|
|
1742
|
+
"div",
|
|
1743
|
+
{
|
|
1744
|
+
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-auto shrink-0",
|
|
1745
|
+
style: {
|
|
1746
|
+
fontFamily: COURIER_STACK,
|
|
1747
|
+
paddingLeft: "1.5in",
|
|
1748
|
+
paddingRight: "1in",
|
|
1749
|
+
paddingTop: "1in",
|
|
1750
|
+
paddingBottom: "1in",
|
|
1751
|
+
lineHeight: "1.2"
|
|
1752
|
+
},
|
|
1753
|
+
"data-screenplay-editor": "true",
|
|
1754
|
+
onMouseUp: handleMouseUp,
|
|
1755
|
+
children: blocks.map((block) => /* @__PURE__ */ jsxs(
|
|
1756
|
+
"div",
|
|
1757
|
+
{
|
|
1758
|
+
"data-block-id": block.id,
|
|
1759
|
+
className: `relative break-words w-full px-4 py-2 ${blockStyles[block.type].className}`,
|
|
1760
|
+
style: __spreadProps(__spreadValues({}, blockStyles[block.type].inputStyle), {
|
|
1761
|
+
minHeight: "2.5rem"
|
|
1762
|
+
}),
|
|
1763
|
+
children: [
|
|
1764
|
+
renderBlockText(block),
|
|
1765
|
+
(selectionMenu == null ? void 0 : selectionMenu.blockId) === block.id && /* @__PURE__ */ jsxs(
|
|
1766
|
+
"div",
|
|
1767
|
+
{
|
|
1768
|
+
ref: menuRef,
|
|
1769
|
+
"data-screenplay-editor": "false",
|
|
1770
|
+
className: `tag-menu absolute z-50 bg-white/70 backdrop-blur-2xl shadow-[0_10px_40px_rgb(0,0,0,0.06)] border border-white rounded-[1.5rem] p-2 flex flex-col w-56 animate-in fade-in zoom-in-95 duration-300 ease-out ${menuPlacement === "top" ? "origin-bottom" : "origin-top"}`,
|
|
1771
|
+
style: {
|
|
1772
|
+
top: selectionMenu.top,
|
|
1773
|
+
left: selectionMenu.left,
|
|
1774
|
+
transform: menuPlacement === "top" ? "translate(-50%, calc(-100% - 12px))" : "translate(-50%, 32px)"
|
|
1775
|
+
},
|
|
1776
|
+
children: [
|
|
1777
|
+
/* @__PURE__ */ jsxs("div", { className: "relative z-10 px-3 py-2.5 border-b border-white/60 mb-1.5", children: [
|
|
1778
|
+
/* @__PURE__ */ jsx("p", { className: "text-[9px] font-extrabold tracking-[0.2em] text-slate-400 uppercase mb-1", children: "Tag Element" }),
|
|
1779
|
+
/* @__PURE__ */ jsxs(
|
|
1780
|
+
"p",
|
|
1781
|
+
{
|
|
1782
|
+
className: "text-xs font-bold text-slate-700 truncate drop-shadow-sm",
|
|
1783
|
+
title: selectionMenu.text,
|
|
1784
|
+
children: [
|
|
1785
|
+
'"',
|
|
1786
|
+
selectionMenu.text,
|
|
1787
|
+
'"'
|
|
1788
|
+
]
|
|
1789
|
+
}
|
|
1790
|
+
)
|
|
1791
|
+
] }),
|
|
1792
|
+
/* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-1", children: [
|
|
1793
|
+
CATEGORIES.filter(
|
|
1794
|
+
(cat) => !(cat.id === "LOCATION" && hasLocationTag)
|
|
1795
|
+
).map((cat) => /* @__PURE__ */ jsxs(
|
|
1796
|
+
"button",
|
|
1797
|
+
{
|
|
1798
|
+
onClick: () => addTag(cat.id),
|
|
1799
|
+
className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-white/80 hover:shadow-[0_2px_10px_rgb(0,0,0,0.02)] active:scale-[0.98]",
|
|
1800
|
+
style: { color: cat.color },
|
|
1801
|
+
children: [
|
|
1802
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
1803
|
+
/* @__PURE__ */ jsx(
|
|
1804
|
+
"div",
|
|
1805
|
+
{
|
|
1806
|
+
className: "w-2 h-2 rounded-full shadow-sm group-hover:scale-125 transition-transform duration-300",
|
|
1807
|
+
style: { backgroundColor: cat.hex }
|
|
1808
|
+
}
|
|
1809
|
+
),
|
|
1810
|
+
cat.label
|
|
1811
|
+
] }),
|
|
1812
|
+
/* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-slate-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Select" })
|
|
1813
|
+
]
|
|
1814
|
+
},
|
|
1815
|
+
cat.id
|
|
1816
|
+
)),
|
|
1817
|
+
tags.some(
|
|
1818
|
+
(t) => t.blockId === block.id && t.startIndex === selectionMenu.startIndex && t.endIndex === selectionMenu.endIndex
|
|
1819
|
+
) && /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-white/60", children: /* @__PURE__ */ jsxs(
|
|
1820
|
+
"button",
|
|
1821
|
+
{
|
|
1822
|
+
onClick: (e) => {
|
|
1823
|
+
const tagToRemove = tags.find(
|
|
1824
|
+
(t) => t.blockId === block.id && t.startIndex === selectionMenu.startIndex && t.endIndex === selectionMenu.endIndex
|
|
1825
|
+
);
|
|
1826
|
+
if (tagToRemove) {
|
|
1827
|
+
removeTag(e, tagToRemove.id);
|
|
1828
|
+
clearSelection();
|
|
1829
|
+
}
|
|
1830
|
+
},
|
|
1831
|
+
className: "group w-full text-[12px] font-bold px-3 py-2 rounded-xl transition-all duration-300 text-left flex items-center justify-between hover:bg-rose-50 hover:text-rose-600 hover:shadow-[0_2px_10px_rgb(225,29,72,0.04)] active:scale-[0.98] text-slate-500 border border-transparent hover:border-rose-100",
|
|
1832
|
+
children: [
|
|
1833
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
1834
|
+
/* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full shadow-sm bg-rose-400 group-hover:scale-125 transition-transform duration-300" }),
|
|
1835
|
+
"Remove Tag"
|
|
1836
|
+
] }),
|
|
1837
|
+
/* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-rose-400 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-1 group-hover:translate-x-0", children: "Remove" })
|
|
1838
|
+
]
|
|
1839
|
+
}
|
|
1840
|
+
) })
|
|
1841
|
+
] })
|
|
1842
|
+
]
|
|
1843
|
+
}
|
|
1844
|
+
)
|
|
1845
|
+
]
|
|
1846
|
+
},
|
|
1847
|
+
block.id
|
|
1848
|
+
))
|
|
1849
|
+
}
|
|
1850
|
+
),
|
|
1851
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full lg:w-80 flex-shrink-0 bg-white/50 backdrop-blur-2xl border border-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-[2.5rem] p-8 sticky top-6", children: [
|
|
1852
|
+
/* @__PURE__ */ jsxs("h3", { className: "text-xs font-extrabold text-slate-800 uppercase tracking-[0.25em] mb-8 flex items-center gap-3", children: [
|
|
1853
|
+
/* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-white/80 shadow-[0_4px_15px_rgb(0,0,0,0.04)] border border-white", children: /* @__PURE__ */ jsx(Tags, { className: "w-3.5 h-3.5 text-slate-500" }) }),
|
|
1854
|
+
"Tags",
|
|
1855
|
+
/* @__PURE__ */ jsx("span", { className: "ml-auto bg-slate-100/80 text-slate-500 px-2.5 py-1 rounded-lg text-[10px] font-bold tracking-widest border border-slate-200/50 shadow-inner", children: tags.length })
|
|
1856
|
+
] }),
|
|
1857
|
+
tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8", children: CATEGORIES.map((cat) => {
|
|
1858
|
+
const catTags = Array.from(
|
|
1859
|
+
new Map(
|
|
1860
|
+
tags.filter((t) => t.categoryId === cat.id).map((tag) => [tag.text.toLowerCase(), tag])
|
|
1861
|
+
).values()
|
|
1862
|
+
);
|
|
1863
|
+
if (catTags.length === 0) return null;
|
|
1864
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
1865
|
+
/* @__PURE__ */ jsxs("h4", { className: "text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2 border-b border-white/60 pb-2", children: [
|
|
1866
|
+
/* @__PURE__ */ jsx(
|
|
1867
|
+
"div",
|
|
1868
|
+
{
|
|
1869
|
+
className: "w-2 h-2 rounded-full shadow-sm",
|
|
1870
|
+
style: { backgroundColor: cat.hex }
|
|
1871
|
+
}
|
|
1872
|
+
),
|
|
1873
|
+
cat.label
|
|
1874
|
+
] }),
|
|
1875
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: catTags.map((tag) => /* @__PURE__ */ jsx(
|
|
1876
|
+
"span",
|
|
1877
|
+
{
|
|
1878
|
+
className: "text-[11px] font-bold px-3 py-1.5 rounded-xl bg-white/80 backdrop-blur-md border border-white shadow-[0_4px_15px_rgb(0,0,0,0.03)] hover:shadow-[0_4px_20px_rgb(0,0,0,0.06)] hover:-translate-y-0.5 transition-all duration-300 cursor-default",
|
|
1879
|
+
style: { color: cat.color },
|
|
1880
|
+
children: tag.text
|
|
1881
|
+
},
|
|
1882
|
+
tag.id
|
|
1883
|
+
)) })
|
|
1884
|
+
] }, cat.id);
|
|
1885
|
+
}) }) : /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-slate-400 italic bg-white/40 p-6 rounded-[2rem] border border-white border-dashed text-center shadow-[0_4px_20px_rgb(0,0,0,0.02)]", children: "Highlight text to tag elements." })
|
|
1886
|
+
] })
|
|
1887
|
+
] }) });
|
|
1888
|
+
}
|
|
1889
|
+
function useScriptBreakdown({
|
|
1890
|
+
scenes
|
|
1891
|
+
}) {
|
|
1892
|
+
const [parsedScenes, setParsedScenes] = useState(scenes || []);
|
|
1893
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
1894
|
+
const [error, setError] = useState(null);
|
|
1895
|
+
const [hasFetchedFallback, setHasFetchedFallback] = useState(false);
|
|
1896
|
+
useEffect(() => {
|
|
1897
|
+
if (scenes && scenes.length > 0) {
|
|
1898
|
+
setParsedScenes(scenes);
|
|
1899
|
+
return;
|
|
1900
|
+
}
|
|
1901
|
+
if (hasFetchedFallback) return;
|
|
1902
|
+
const fetchFallback = async () => {
|
|
1903
|
+
setIsLoading(true);
|
|
1904
|
+
setHasFetchedFallback(true);
|
|
1905
|
+
try {
|
|
1906
|
+
const response = await fetch(
|
|
1907
|
+
"https://pub-4c2073ce6f434c4e92ed33f8e1c7f9ea.r2.dev/screenplay%20(1).sbx"
|
|
1908
|
+
);
|
|
1909
|
+
if (!response.ok) {
|
|
1910
|
+
throw new Error(
|
|
1911
|
+
`Failed to fetch fallback script: ${response.status}`
|
|
1912
|
+
);
|
|
1913
|
+
}
|
|
1914
|
+
let text = await response.text();
|
|
1915
|
+
if (text.includes("<div")) {
|
|
1916
|
+
const textarea = document.createElement("textarea");
|
|
1917
|
+
textarea.innerHTML = text;
|
|
1918
|
+
text = textarea.value;
|
|
1919
|
+
}
|
|
1920
|
+
const parser = new DOMParser();
|
|
1921
|
+
const doc = parser.parseFromString(text, "text/html");
|
|
1922
|
+
const divs = Array.from(doc.querySelectorAll("div"));
|
|
1923
|
+
const extractedScenes = [];
|
|
1924
|
+
let currentSceneNumber = "1";
|
|
1925
|
+
let currentContent = "";
|
|
1926
|
+
let hasSeenFirstSceneHeading = false;
|
|
1927
|
+
divs.forEach((div) => {
|
|
1928
|
+
var _a;
|
|
1929
|
+
const isSceneHeading = div.classList.contains("divtype0");
|
|
1930
|
+
const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
|
|
1931
|
+
if (!divText) return;
|
|
1932
|
+
if (isSceneHeading) {
|
|
1933
|
+
if (hasSeenFirstSceneHeading) {
|
|
1934
|
+
extractedScenes.push({
|
|
1935
|
+
scene_number: currentSceneNumber,
|
|
1936
|
+
content: currentContent.trim()
|
|
1937
|
+
});
|
|
1938
|
+
currentContent = "";
|
|
1939
|
+
}
|
|
1940
|
+
hasSeenFirstSceneHeading = true;
|
|
1941
|
+
currentSceneNumber = div.getAttribute("data-scene") || String(extractedScenes.length + 1);
|
|
1942
|
+
}
|
|
1943
|
+
currentContent += div.outerHTML + "\n";
|
|
1944
|
+
});
|
|
1945
|
+
if (currentContent.trim()) {
|
|
1946
|
+
extractedScenes.push({
|
|
1947
|
+
scene_number: currentSceneNumber,
|
|
1948
|
+
content: currentContent.trim()
|
|
1949
|
+
});
|
|
1950
|
+
}
|
|
1951
|
+
setParsedScenes(extractedScenes);
|
|
1952
|
+
} catch (err) {
|
|
1953
|
+
console.error("Error fetching fallback script:", err);
|
|
1954
|
+
setError(err instanceof Error ? err : new Error("Unknown error"));
|
|
1955
|
+
} finally {
|
|
1956
|
+
setIsLoading(false);
|
|
1957
|
+
}
|
|
1958
|
+
};
|
|
1959
|
+
fetchFallback();
|
|
1960
|
+
}, [scenes, hasFetchedFallback]);
|
|
1961
|
+
return { scenes: parsedScenes, isLoading, error };
|
|
1962
|
+
}
|
|
1963
|
+
var use_script_breakdown_default = useScriptBreakdown;
|
|
1964
|
+
|
|
1965
|
+
// app/hook/use-script-breakdown-scene.ts
|
|
1966
|
+
function useScriptBreakdownScene(sceneNumber) {
|
|
1967
|
+
const { scenes, isLoading, error } = use_script_breakdown_default({ scenes: [] });
|
|
1968
|
+
const scene = useMemo(() => {
|
|
1969
|
+
return scenes.find((s) => s.scene_number === sceneNumber);
|
|
1970
|
+
}, [scenes, sceneNumber]);
|
|
1971
|
+
const blocks = useMemo(() => {
|
|
1972
|
+
if (!scene || !scene.content) return [];
|
|
1973
|
+
const parser = new DOMParser();
|
|
1974
|
+
const doc = parser.parseFromString(scene.content, "text/html");
|
|
1975
|
+
const divs = Array.from(doc.querySelectorAll("div"));
|
|
1976
|
+
const parsedBlocks = [];
|
|
1977
|
+
const typeMap = {
|
|
1978
|
+
divtype0: "SCENE_HEADING",
|
|
1979
|
+
divtype2: "ACTION",
|
|
1980
|
+
divtype3: "CHARACTER",
|
|
1981
|
+
divtype4: "PARENTHETICAL",
|
|
1982
|
+
divtype5: "DIALOGUE",
|
|
1983
|
+
divtype6: "TRANSITION"
|
|
1984
|
+
};
|
|
1985
|
+
divs.forEach((div) => {
|
|
1986
|
+
var _a;
|
|
1987
|
+
const divText = ((_a = div.textContent) == null ? void 0 : _a.trim()) || "";
|
|
1988
|
+
if (!divText) return;
|
|
1989
|
+
let type = "ACTION";
|
|
1990
|
+
for (const className of Array.from(div.classList)) {
|
|
1991
|
+
if (typeMap[className]) {
|
|
1992
|
+
type = typeMap[className];
|
|
1993
|
+
break;
|
|
1994
|
+
}
|
|
1995
|
+
}
|
|
1996
|
+
parsedBlocks.push({ id: uuid(), type, text: divText });
|
|
1997
|
+
});
|
|
1998
|
+
return parsedBlocks;
|
|
1999
|
+
}, [scene]);
|
|
2000
|
+
const characters = useMemo(() => {
|
|
2001
|
+
const chars = blocks.filter((b) => b.type === "CHARACTER").map((b) => {
|
|
2002
|
+
const text = b.text.trim().toUpperCase();
|
|
2003
|
+
const parenIndex = text.indexOf("(");
|
|
2004
|
+
return parenIndex > -1 ? text.substring(0, parenIndex).trim() : text;
|
|
2005
|
+
}).filter(Boolean);
|
|
2006
|
+
return [...new Set(chars)];
|
|
2007
|
+
}, [blocks]);
|
|
2008
|
+
const [tags, setTags] = useState([]);
|
|
2009
|
+
const [selectionMenu, setSelectionMenu] = useState(null);
|
|
2010
|
+
const autoTaggedSceneRef = useRef(null);
|
|
2011
|
+
const [menuPlacement, setMenuPlacement] = useState("top");
|
|
2012
|
+
const menuRef = useRef(null);
|
|
2013
|
+
useEffect(() => {
|
|
2014
|
+
setTags([]);
|
|
2015
|
+
autoTaggedSceneRef.current = null;
|
|
2016
|
+
}, [sceneNumber]);
|
|
2017
|
+
useEffect(() => {
|
|
2018
|
+
if (blocks.length > 0 && characters.length > 0 && autoTaggedSceneRef.current !== sceneNumber) {
|
|
2019
|
+
const autoTags = [];
|
|
2020
|
+
const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
2021
|
+
const sortedChars = [...characters].sort((a, b) => b.length - a.length);
|
|
2022
|
+
blocks.forEach((block) => {
|
|
2023
|
+
sortedChars.forEach((char) => {
|
|
2024
|
+
const escapedChar = escapeRegExp(char);
|
|
2025
|
+
const regex = new RegExp(`\\b${escapedChar}\\b`, "gi");
|
|
2026
|
+
let match;
|
|
2027
|
+
while ((match = regex.exec(block.text)) !== null) {
|
|
2028
|
+
const isOverlapping = autoTags.some(
|
|
2029
|
+
(t) => t.blockId === block.id && (match.index + char.length > t.startIndex && match.index < t.endIndex)
|
|
2030
|
+
);
|
|
2031
|
+
if (!isOverlapping) {
|
|
2032
|
+
autoTags.push({
|
|
2033
|
+
id: uuid(),
|
|
2034
|
+
blockId: block.id,
|
|
2035
|
+
categoryId: "CAST",
|
|
2036
|
+
text: block.text.substring(match.index, match.index + char.length),
|
|
2037
|
+
startIndex: match.index,
|
|
2038
|
+
endIndex: match.index + char.length
|
|
2039
|
+
});
|
|
2040
|
+
}
|
|
2041
|
+
}
|
|
2042
|
+
});
|
|
2043
|
+
});
|
|
2044
|
+
setTags(autoTags);
|
|
2045
|
+
autoTaggedSceneRef.current = sceneNumber;
|
|
2046
|
+
}
|
|
2047
|
+
}, [blocks, characters, sceneNumber]);
|
|
2048
|
+
const clearSelection = useCallback(() => {
|
|
2049
|
+
var _a;
|
|
2050
|
+
setSelectionMenu(null);
|
|
2051
|
+
(_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
|
|
2052
|
+
}, []);
|
|
2053
|
+
useEffect(() => {
|
|
2054
|
+
if (!selectionMenu) {
|
|
2055
|
+
setMenuPlacement("top");
|
|
2056
|
+
}
|
|
2057
|
+
}, [selectionMenu]);
|
|
2058
|
+
useEffect(() => {
|
|
2059
|
+
if (selectionMenu && menuRef.current) {
|
|
2060
|
+
const rect = menuRef.current.getBoundingClientRect();
|
|
2061
|
+
if (menuPlacement === "top" && rect.top < 100) {
|
|
2062
|
+
setMenuPlacement("bottom");
|
|
2063
|
+
} else if (menuPlacement === "bottom" && rect.bottom > window.innerHeight - 40 && rect.top > 300) {
|
|
2064
|
+
setMenuPlacement("top");
|
|
2065
|
+
}
|
|
2066
|
+
}
|
|
2067
|
+
}, [selectionMenu, menuPlacement]);
|
|
2068
|
+
useEffect(() => {
|
|
2069
|
+
const handleClickOutside = (e) => {
|
|
2070
|
+
if (selectionMenu && !e.target.closest(".tag-menu")) {
|
|
2071
|
+
clearSelection();
|
|
2072
|
+
}
|
|
2073
|
+
};
|
|
2074
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2075
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2076
|
+
}, [selectionMenu, clearSelection]);
|
|
2077
|
+
const getAbsoluteOffset = (container, targetNode, targetOffset) => {
|
|
2078
|
+
let absoluteOffset = 0;
|
|
2079
|
+
let found = false;
|
|
2080
|
+
const traverse = (node) => {
|
|
2081
|
+
var _a;
|
|
2082
|
+
if (found) return;
|
|
2083
|
+
if (node === targetNode) {
|
|
2084
|
+
absoluteOffset += targetOffset;
|
|
2085
|
+
found = true;
|
|
2086
|
+
return;
|
|
2087
|
+
}
|
|
2088
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
2089
|
+
absoluteOffset += ((_a = node.nodeValue) == null ? void 0 : _a.length) || 0;
|
|
2090
|
+
} else {
|
|
2091
|
+
for (let i = 0; i < node.childNodes.length; i++) {
|
|
2092
|
+
traverse(node.childNodes[i]);
|
|
2093
|
+
if (found) return;
|
|
2094
|
+
}
|
|
2095
|
+
}
|
|
2096
|
+
};
|
|
2097
|
+
traverse(container);
|
|
2098
|
+
return found ? absoluteOffset : null;
|
|
2099
|
+
};
|
|
2100
|
+
const handleMouseUp = () => {
|
|
2101
|
+
const selection = window.getSelection();
|
|
2102
|
+
if (!selection || selection.isCollapsed || !selection.toString().trim()) return;
|
|
2103
|
+
const range = selection.getRangeAt(0);
|
|
2104
|
+
let container = range.commonAncestorContainer;
|
|
2105
|
+
if (container.nodeType === Node.TEXT_NODE) container = container.parentElement;
|
|
2106
|
+
const blockElem = container.closest("[data-block-id]");
|
|
2107
|
+
if (!blockElem) return;
|
|
2108
|
+
const blockId = blockElem.getAttribute("data-block-id");
|
|
2109
|
+
const startOffset = getAbsoluteOffset(blockElem, range.startContainer, range.startOffset);
|
|
2110
|
+
const endOffset = getAbsoluteOffset(blockElem, range.endContainer, range.endOffset);
|
|
2111
|
+
if (startOffset !== null && endOffset !== null) {
|
|
2112
|
+
const rect = range.getBoundingClientRect();
|
|
2113
|
+
const blockRect = blockElem.getBoundingClientRect();
|
|
2114
|
+
setSelectionMenu({
|
|
2115
|
+
blockId,
|
|
2116
|
+
startIndex: Math.min(startOffset, endOffset),
|
|
2117
|
+
endIndex: Math.max(startOffset, endOffset),
|
|
2118
|
+
text: selection.toString().trim(),
|
|
2119
|
+
top: rect.top - blockRect.top,
|
|
2120
|
+
left: rect.left - blockRect.left + rect.width / 2
|
|
2121
|
+
});
|
|
2122
|
+
}
|
|
2123
|
+
};
|
|
2124
|
+
const addTag = (categoryId) => {
|
|
2125
|
+
if (!selectionMenu) return;
|
|
2126
|
+
const newTag = {
|
|
2127
|
+
id: uuid(),
|
|
2128
|
+
blockId: selectionMenu.blockId,
|
|
2129
|
+
categoryId,
|
|
2130
|
+
text: selectionMenu.text,
|
|
2131
|
+
startIndex: selectionMenu.startIndex,
|
|
2132
|
+
endIndex: selectionMenu.endIndex
|
|
2133
|
+
};
|
|
2134
|
+
setTags((prev) => {
|
|
2135
|
+
const filtered = prev.filter(
|
|
2136
|
+
(t) => t.blockId !== newTag.blockId || !(newTag.endIndex > t.startIndex && newTag.startIndex < t.endIndex)
|
|
2137
|
+
);
|
|
2138
|
+
return [...filtered, newTag];
|
|
2139
|
+
});
|
|
2140
|
+
clearSelection();
|
|
2141
|
+
};
|
|
2142
|
+
const removeTag = (e, id) => {
|
|
2143
|
+
e.stopPropagation();
|
|
2144
|
+
e.preventDefault();
|
|
2145
|
+
setTags((prev) => prev.filter((t) => t.id !== id));
|
|
2146
|
+
clearSelection();
|
|
2147
|
+
};
|
|
2148
|
+
return {
|
|
2149
|
+
scene,
|
|
2150
|
+
blocks,
|
|
2151
|
+
characters,
|
|
2152
|
+
isLoading,
|
|
2153
|
+
error,
|
|
2154
|
+
tags,
|
|
2155
|
+
selectionMenu,
|
|
2156
|
+
handleMouseUp,
|
|
2157
|
+
addTag,
|
|
2158
|
+
removeTag,
|
|
2159
|
+
clearSelection,
|
|
2160
|
+
menuPlacement,
|
|
2161
|
+
menuRef
|
|
2162
|
+
};
|
|
2163
|
+
}
|
|
2164
|
+
|
|
2165
|
+
export { CATEGORIES, ScreenplayEditorView, ScriptBreakdownSceneView, blockStyles, blockTypes, handleSaveAsPdf, handleSaveAsSbx, icons, timeOfDayOptions, useScreenplayEditor, useScriptBreakdownScene, uuid };
|
|
1635
2166
|
//# sourceMappingURL=index.js.map
|
|
1636
2167
|
//# sourceMappingURL=index.js.map
|