@vishu1301/script-writing 0.3.3 → 0.3.4
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/dist/{index.mjs → index.cjs} +133 -123
- package/dist/index.cjs.map +1 -0
- package/dist/index.js +122 -132
- package/dist/index.js.map +1 -1
- package/package.json +5 -4
- package/dist/index.mjs.map +0 -1
- /package/dist/{index.d.mts → index.d.cts} +0 -0
package/dist/index.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __defProps = Object.defineProperties;
|
|
5
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
4
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
5
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
7
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -21,39 +18,20 @@ var __spreadValues = (a, b) => {
|
|
|
21
18
|
return a;
|
|
22
19
|
};
|
|
23
20
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __export = (target, all) => {
|
|
25
|
-
for (var name in all)
|
|
26
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
27
|
-
};
|
|
28
|
-
var __copyProps = (to, from, except, desc) => {
|
|
29
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
30
|
-
for (let key of __getOwnPropNames(from))
|
|
31
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
32
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
33
|
-
}
|
|
34
|
-
return to;
|
|
35
|
-
};
|
|
36
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
37
|
-
|
|
38
|
-
// app/index.ts
|
|
39
|
-
var index_exports = {};
|
|
40
|
-
__export(index_exports, {
|
|
41
|
-
ScreenplayEditorView: () => ScreenplayEditorView,
|
|
42
|
-
blockStyles: () => blockStyles,
|
|
43
|
-
blockTypes: () => blockTypes,
|
|
44
|
-
icons: () => icons,
|
|
45
|
-
timeOfDayOptions: () => timeOfDayOptions,
|
|
46
|
-
useScreenplayEditor: () => useScreenplayEditor,
|
|
47
|
-
uuid: () => uuid
|
|
48
|
-
});
|
|
49
|
-
module.exports = __toCommonJS(index_exports);
|
|
50
21
|
|
|
51
22
|
// app/view/screenplay-editor.view.tsx
|
|
52
|
-
|
|
23
|
+
import { useState } from "react";
|
|
53
24
|
|
|
54
25
|
// app/types/screenplay-editor.types.tsx
|
|
55
|
-
|
|
56
|
-
|
|
26
|
+
import {
|
|
27
|
+
Clapperboard,
|
|
28
|
+
Sparkles,
|
|
29
|
+
UserRound,
|
|
30
|
+
Brackets,
|
|
31
|
+
MessageCircle,
|
|
32
|
+
ArrowRightLeft
|
|
33
|
+
} from "lucide-react";
|
|
34
|
+
import { jsx } from "react/jsx-runtime";
|
|
57
35
|
var timeOfDayOptions = ["DAY", "NIGHT"];
|
|
58
36
|
var blockTypes = [
|
|
59
37
|
"SCENE_HEADING",
|
|
@@ -65,12 +43,12 @@ var blockTypes = [
|
|
|
65
43
|
];
|
|
66
44
|
var uuid = () => Math.random().toString(36).slice(2, 9);
|
|
67
45
|
var icons = {
|
|
68
|
-
SCENE_HEADING: /* @__PURE__ */
|
|
69
|
-
ACTION: /* @__PURE__ */
|
|
70
|
-
CHARACTER: /* @__PURE__ */
|
|
71
|
-
PARENTHETICAL: /* @__PURE__ */
|
|
72
|
-
DIALOGUE: /* @__PURE__ */
|
|
73
|
-
TRANSITION: /* @__PURE__ */
|
|
46
|
+
SCENE_HEADING: /* @__PURE__ */ jsx(Clapperboard, { className: "w-5 h-5" }),
|
|
47
|
+
ACTION: /* @__PURE__ */ jsx(Sparkles, { className: "w-5 h-5" }),
|
|
48
|
+
CHARACTER: /* @__PURE__ */ jsx(UserRound, { className: "w-5 h-5" }),
|
|
49
|
+
PARENTHETICAL: /* @__PURE__ */ jsx(Brackets, { className: "w-5 h-5" }),
|
|
50
|
+
DIALOGUE: /* @__PURE__ */ jsx(MessageCircle, { className: "w-5 h-5" }),
|
|
51
|
+
TRANSITION: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "w-5 h-5" })
|
|
74
52
|
};
|
|
75
53
|
var blockStyles = {
|
|
76
54
|
SCENE_HEADING: {
|
|
@@ -155,8 +133,15 @@ var blockStyles = {
|
|
|
155
133
|
};
|
|
156
134
|
|
|
157
135
|
// app/view/screenplay-editor.view.tsx
|
|
158
|
-
|
|
159
|
-
|
|
136
|
+
import {
|
|
137
|
+
ArrowRight,
|
|
138
|
+
ChevronRight,
|
|
139
|
+
User,
|
|
140
|
+
Cog,
|
|
141
|
+
Save,
|
|
142
|
+
FileDown
|
|
143
|
+
} from "lucide-react";
|
|
144
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
160
145
|
function ScreenplayEditorView({
|
|
161
146
|
blocks,
|
|
162
147
|
pages,
|
|
@@ -179,19 +164,19 @@ function ScreenplayEditorView({
|
|
|
179
164
|
onSaveAsPdf,
|
|
180
165
|
onSyncWithCloud
|
|
181
166
|
}) {
|
|
182
|
-
const [isRulesOpen, setIsRulesOpen] =
|
|
183
|
-
return /* @__PURE__ */
|
|
184
|
-
/* @__PURE__ */ (
|
|
167
|
+
const [isRulesOpen, setIsRulesOpen] = useState(false);
|
|
168
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
169
|
+
/* @__PURE__ */ jsx2("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) => {
|
|
185
170
|
var _a;
|
|
186
171
|
const selected = ((_a = blocks.find((b) => b.id === focusedBlockId)) == null ? void 0 : _a.type) === type;
|
|
187
|
-
return /* @__PURE__ */
|
|
172
|
+
return /* @__PURE__ */ jsxs(
|
|
188
173
|
"button",
|
|
189
174
|
{
|
|
190
175
|
type: "button",
|
|
191
176
|
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"}`,
|
|
192
177
|
onClick: () => handleBlockTypeChange(type),
|
|
193
178
|
children: [
|
|
194
|
-
/* @__PURE__ */ (
|
|
179
|
+
/* @__PURE__ */ jsx2(
|
|
195
180
|
"input",
|
|
196
181
|
{
|
|
197
182
|
type: "radio",
|
|
@@ -203,14 +188,14 @@ function ScreenplayEditorView({
|
|
|
203
188
|
readOnly: true
|
|
204
189
|
}
|
|
205
190
|
),
|
|
206
|
-
/* @__PURE__ */
|
|
191
|
+
/* @__PURE__ */ jsxs(
|
|
207
192
|
"label",
|
|
208
193
|
{
|
|
209
194
|
htmlFor: `block-type-${type}`,
|
|
210
195
|
className: "flex items-center gap-2 cursor-pointer",
|
|
211
196
|
children: [
|
|
212
197
|
icons[type],
|
|
213
|
-
/* @__PURE__ */ (
|
|
198
|
+
/* @__PURE__ */ jsx2("span", { className: "whitespace-nowrap hidden sm:inline", children: blockStyles[type].label })
|
|
214
199
|
]
|
|
215
200
|
}
|
|
216
201
|
)
|
|
@@ -219,7 +204,7 @@ function ScreenplayEditorView({
|
|
|
219
204
|
type
|
|
220
205
|
);
|
|
221
206
|
}) }),
|
|
222
|
-
/* @__PURE__ */ (
|
|
207
|
+
/* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-12 w-full items-center pb-24", children: pages.map((pageBlocks, pageIndex) => /* @__PURE__ */ jsxs(
|
|
223
208
|
"div",
|
|
224
209
|
{
|
|
225
210
|
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",
|
|
@@ -229,15 +214,15 @@ function ScreenplayEditorView({
|
|
|
229
214
|
children: [
|
|
230
215
|
pageBlocks.map((block) => {
|
|
231
216
|
var _a, _b;
|
|
232
|
-
return /* @__PURE__ */ (
|
|
217
|
+
return /* @__PURE__ */ jsx2(
|
|
233
218
|
"div",
|
|
234
219
|
{
|
|
235
220
|
"data-block-id": block.id,
|
|
236
221
|
className: `relative rounded-sm transition-all duration-200 outline-none ${focusedBlockId === block.id ? "bg-zinc-100/50" : "bg-transparent"}`,
|
|
237
|
-
children: block.type === "SCENE_HEADING" ? /* @__PURE__ */
|
|
238
|
-
/* @__PURE__ */
|
|
239
|
-
/* @__PURE__ */ (
|
|
240
|
-
/* @__PURE__ */
|
|
222
|
+
children: block.type === "SCENE_HEADING" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
223
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-1 bg-transparent", children: [
|
|
224
|
+
/* @__PURE__ */ jsx2("span", { className: "absolute -left-16 top-2 w-12 text-right text-zinc-400 font-semibold select-none", children: String(sceneNumbers[block.id] || 0) }),
|
|
225
|
+
/* @__PURE__ */ jsxs(
|
|
241
226
|
"select",
|
|
242
227
|
{
|
|
243
228
|
className: "rounded-md text-zinc-800 font-bold px-1.5 py-1 appearance-none bg-transparent hover:bg-zinc-200/50 outline-none cursor-pointer w-fit transition-colors",
|
|
@@ -245,13 +230,13 @@ function ScreenplayEditorView({
|
|
|
245
230
|
value: (_a = block.sceneType) != null ? _a : "INT.",
|
|
246
231
|
onChange: (e) => handleSceneTypeChange(block.id, e.target.value),
|
|
247
232
|
children: [
|
|
248
|
-
/* @__PURE__ */ (
|
|
249
|
-
/* @__PURE__ */ (
|
|
250
|
-
/* @__PURE__ */ (
|
|
233
|
+
/* @__PURE__ */ jsx2("option", { children: "INT." }),
|
|
234
|
+
/* @__PURE__ */ jsx2("option", { children: "EXT." }),
|
|
235
|
+
/* @__PURE__ */ jsx2("option", { children: "INT/EXT." })
|
|
251
236
|
]
|
|
252
237
|
}
|
|
253
238
|
),
|
|
254
|
-
/* @__PURE__ */ (
|
|
239
|
+
/* @__PURE__ */ jsx2(
|
|
255
240
|
"div",
|
|
256
241
|
{
|
|
257
242
|
ref: (el) => {
|
|
@@ -274,27 +259,27 @@ function ScreenplayEditorView({
|
|
|
274
259
|
onBlur: () => handleBlur(block.id)
|
|
275
260
|
}
|
|
276
261
|
),
|
|
277
|
-
/* @__PURE__ */ (
|
|
278
|
-
/* @__PURE__ */ (
|
|
262
|
+
/* @__PURE__ */ jsx2("span", { className: "text-zinc-400/80 font-bold", children: "-" }),
|
|
263
|
+
/* @__PURE__ */ jsx2(
|
|
279
264
|
"select",
|
|
280
265
|
{
|
|
281
266
|
className: "rounded-md text-zinc-800 font-bold px-1.5 py-1 appearance-none bg-transparent hover:bg-zinc-200/50 outline-none cursor-pointer transition-colors",
|
|
282
267
|
"aria-label": "Time of Day",
|
|
283
268
|
value: (_b = block.timeOfDay) != null ? _b : "DAY",
|
|
284
269
|
onChange: (e) => handleTimeOfDayChange(block.id, e.target.value),
|
|
285
|
-
children: timeOfDayOptions.map((t) => /* @__PURE__ */ (
|
|
270
|
+
children: timeOfDayOptions.map((t) => /* @__PURE__ */ jsx2("option", { children: t }, t))
|
|
286
271
|
}
|
|
287
272
|
)
|
|
288
273
|
] }),
|
|
289
|
-
focusedBlockId === block.id && showSuggestions && locations.length > 0 && /* @__PURE__ */ (
|
|
274
|
+
focusedBlockId === block.id && showSuggestions && locations.length > 0 && /* @__PURE__ */ jsx2(
|
|
290
275
|
"div",
|
|
291
276
|
{
|
|
292
277
|
role: "listbox",
|
|
293
278
|
id: `suggestions-${block.id}`,
|
|
294
279
|
className: "absolute top-[calc(100%+6px)] left-0 min-w-[240px] z-50 bg-white border border-slate-200/80 shadow-xl shadow-slate-200/40 rounded-xl py-1 overflow-hidden animate-in fade-in zoom-in-95 duration-150",
|
|
295
|
-
children: /* @__PURE__ */ (
|
|
280
|
+
children: /* @__PURE__ */ jsx2("div", { className: "max-h-60 overflow-y-auto custom-scrollbar", children: locations.filter(
|
|
296
281
|
(loc) => loc.startsWith(block.text.toUpperCase()) && loc !== block.text.toUpperCase()
|
|
297
|
-
).map((loc) => /* @__PURE__ */
|
|
282
|
+
).map((loc) => /* @__PURE__ */ jsxs(
|
|
298
283
|
"div",
|
|
299
284
|
{
|
|
300
285
|
role: "option",
|
|
@@ -316,16 +301,16 @@ function ScreenplayEditorView({
|
|
|
316
301
|
handleBlur(block.id);
|
|
317
302
|
},
|
|
318
303
|
children: [
|
|
319
|
-
/* @__PURE__ */ (
|
|
320
|
-
/* @__PURE__ */ (
|
|
304
|
+
/* @__PURE__ */ jsx2("span", { className: "text-[12px] font-semibold tracking-wide text-slate-600 uppercase line-clamp-1", children: loc }),
|
|
305
|
+
/* @__PURE__ */ jsx2(ArrowRight, { className: "w-3.5 h-3.5 text-slate-300 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" })
|
|
321
306
|
]
|
|
322
307
|
},
|
|
323
308
|
loc
|
|
324
309
|
)) })
|
|
325
310
|
}
|
|
326
311
|
)
|
|
327
|
-
] }) : /* @__PURE__ */
|
|
328
|
-
/* @__PURE__ */ (
|
|
312
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
313
|
+
/* @__PURE__ */ jsx2(
|
|
329
314
|
"div",
|
|
330
315
|
{
|
|
331
316
|
ref: (el) => {
|
|
@@ -348,15 +333,15 @@ function ScreenplayEditorView({
|
|
|
348
333
|
style: blockStyles[block.type].inputStyle
|
|
349
334
|
}
|
|
350
335
|
),
|
|
351
|
-
focusedBlockId === block.id && block.type === "CHARACTER" && showSuggestions && characters.length > 0 && /* @__PURE__ */ (
|
|
336
|
+
focusedBlockId === block.id && block.type === "CHARACTER" && showSuggestions && characters.length > 0 && /* @__PURE__ */ jsx2(
|
|
352
337
|
"div",
|
|
353
338
|
{
|
|
354
339
|
role: "listbox",
|
|
355
340
|
id: `suggestions-${block.id}`,
|
|
356
341
|
className: "absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-72 z-50 bg-white border border-slate-200 shadow-2xl shadow-slate-200/60 rounded-xl py-2 overflow-hidden animate-in fade-in zoom-in-95 duration-200",
|
|
357
|
-
children: /* @__PURE__ */ (
|
|
342
|
+
children: /* @__PURE__ */ jsx2("div", { className: "max-h-56 overflow-y-auto custom-scrollbar", children: characters.filter(
|
|
358
343
|
(char) => char.startsWith(block.text.toUpperCase()) && char !== block.text.toUpperCase()
|
|
359
|
-
).map((char) => /* @__PURE__ */
|
|
344
|
+
).map((char) => /* @__PURE__ */ jsxs(
|
|
360
345
|
"div",
|
|
361
346
|
{
|
|
362
347
|
role: "option",
|
|
@@ -378,9 +363,9 @@ function ScreenplayEditorView({
|
|
|
378
363
|
handleBlur(block.id);
|
|
379
364
|
},
|
|
380
365
|
children: [
|
|
381
|
-
/* @__PURE__ */ (
|
|
382
|
-
/* @__PURE__ */ (
|
|
383
|
-
/* @__PURE__ */ (
|
|
366
|
+
/* @__PURE__ */ jsx2(User, { className: "w-3.5 h-3.5 text-slate-300 group-hover:text-sky-500 transition-colors mr-3" }),
|
|
367
|
+
/* @__PURE__ */ jsx2("span", { className: "flex-1 text-[11px] font-bold tracking-[0.1em] text-slate-600 uppercase text-left", children: char }),
|
|
368
|
+
/* @__PURE__ */ jsx2(ChevronRight, { className: "w-3 h-3 text-slate-200 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" })
|
|
384
369
|
]
|
|
385
370
|
},
|
|
386
371
|
char
|
|
@@ -392,7 +377,7 @@ function ScreenplayEditorView({
|
|
|
392
377
|
block.id + "-" + block.type
|
|
393
378
|
);
|
|
394
379
|
}),
|
|
395
|
-
isPageSplitEnabled && /* @__PURE__ */
|
|
380
|
+
isPageSplitEnabled && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-10 right-16 md:right-20 text-zinc-400 font-semibold text-sm select-none pointer-events-none", children: [
|
|
396
381
|
pageIndex + 1,
|
|
397
382
|
"."
|
|
398
383
|
] })
|
|
@@ -400,37 +385,37 @@ function ScreenplayEditorView({
|
|
|
400
385
|
},
|
|
401
386
|
pageIndex
|
|
402
387
|
)) }),
|
|
403
|
-
/* @__PURE__ */
|
|
404
|
-
onSave && /* @__PURE__ */
|
|
388
|
+
/* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 right-6 flex flex-col items-end gap-4 z-50", children: [
|
|
389
|
+
onSave && /* @__PURE__ */ jsxs(
|
|
405
390
|
"button",
|
|
406
391
|
{
|
|
407
392
|
onClick: onSave,
|
|
408
393
|
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",
|
|
409
394
|
"aria-label": "Save Script",
|
|
410
395
|
children: [
|
|
411
|
-
/* @__PURE__ */ (
|
|
412
|
-
/* @__PURE__ */ (
|
|
396
|
+
/* @__PURE__ */ jsx2(Save, { className: "w-5 h-5" }),
|
|
397
|
+
/* @__PURE__ */ jsx2("span", { className: "text-sm font-semibold", children: "Save" })
|
|
413
398
|
]
|
|
414
399
|
}
|
|
415
400
|
),
|
|
416
|
-
onSaveAsPdf && /* @__PURE__ */
|
|
401
|
+
onSaveAsPdf && /* @__PURE__ */ jsxs(
|
|
417
402
|
"button",
|
|
418
403
|
{
|
|
419
404
|
onClick: onSaveAsPdf,
|
|
420
405
|
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",
|
|
421
406
|
"aria-label": "Save Script as PDF",
|
|
422
407
|
children: [
|
|
423
|
-
/* @__PURE__ */ (
|
|
424
|
-
/* @__PURE__ */ (
|
|
408
|
+
/* @__PURE__ */ jsx2(FileDown, { className: "w-5 h-5" }),
|
|
409
|
+
/* @__PURE__ */ jsx2("span", { className: "text-sm font-semibold", children: "Save as PDF" })
|
|
425
410
|
]
|
|
426
411
|
}
|
|
427
412
|
),
|
|
428
|
-
isRulesOpen && /* @__PURE__ */
|
|
429
|
-
/* @__PURE__ */ (
|
|
430
|
-
/* @__PURE__ */
|
|
431
|
-
/* @__PURE__ */
|
|
432
|
-
/* @__PURE__ */ (
|
|
433
|
-
/* @__PURE__ */ (
|
|
413
|
+
isRulesOpen && /* @__PURE__ */ 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: [
|
|
414
|
+
/* @__PURE__ */ jsx2("h4", { className: "font-bold text-zinc-800 mb-3 text-sm", children: "Settings & Shortcuts" }),
|
|
415
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
|
|
416
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-6", children: [
|
|
417
|
+
/* @__PURE__ */ jsx2("span", { className: "font-semibold text-zinc-800", children: "A4 Page Split" }),
|
|
418
|
+
/* @__PURE__ */ jsx2(
|
|
434
419
|
"button",
|
|
435
420
|
{
|
|
436
421
|
type: "button",
|
|
@@ -438,7 +423,7 @@ function ScreenplayEditorView({
|
|
|
438
423
|
"aria-checked": isPageSplitEnabled,
|
|
439
424
|
onClick: togglePageSplit,
|
|
440
425
|
className: `${isPageSplitEnabled ? "bg-zinc-900" : "bg-zinc-300"} relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none`,
|
|
441
|
-
children: /* @__PURE__ */ (
|
|
426
|
+
children: /* @__PURE__ */ jsx2(
|
|
442
427
|
"span",
|
|
443
428
|
{
|
|
444
429
|
"aria-hidden": "true",
|
|
@@ -448,33 +433,33 @@ function ScreenplayEditorView({
|
|
|
448
433
|
}
|
|
449
434
|
)
|
|
450
435
|
] }),
|
|
451
|
-
/* @__PURE__ */ (
|
|
452
|
-
/* @__PURE__ */
|
|
453
|
-
/* @__PURE__ */ (
|
|
454
|
-
/* @__PURE__ */ (
|
|
436
|
+
/* @__PURE__ */ jsx2("div", { className: "space-y-1.5 pt-3 border-t border-zinc-200/50", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-1.5", children: [
|
|
437
|
+
/* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
|
|
438
|
+
/* @__PURE__ */ jsx2("span", { children: "New Block" }),
|
|
439
|
+
/* @__PURE__ */ jsx2("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Enter" })
|
|
455
440
|
] }),
|
|
456
|
-
/* @__PURE__ */
|
|
457
|
-
/* @__PURE__ */ (
|
|
458
|
-
/* @__PURE__ */ (
|
|
441
|
+
/* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
|
|
442
|
+
/* @__PURE__ */ jsx2("span", { children: "Delete Block" }),
|
|
443
|
+
/* @__PURE__ */ jsx2("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Backspace" })
|
|
459
444
|
] }),
|
|
460
|
-
/* @__PURE__ */
|
|
461
|
-
/* @__PURE__ */ (
|
|
462
|
-
/* @__PURE__ */
|
|
463
|
-
/* @__PURE__ */ (
|
|
464
|
-
/* @__PURE__ */ (
|
|
465
|
-
/* @__PURE__ */ (
|
|
445
|
+
/* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-6", children: [
|
|
446
|
+
/* @__PURE__ */ jsx2("span", { children: "Change Type" }),
|
|
447
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
448
|
+
/* @__PURE__ */ jsx2("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "Ctrl" }),
|
|
449
|
+
/* @__PURE__ */ jsx2("span", { children: "+" }),
|
|
450
|
+
/* @__PURE__ */ jsx2("kbd", { className: "px-2 py-1 text-xs font-semibold text-zinc-800 bg-zinc-200/70 border border-zinc-300/70 rounded-md", children: "\u2191/\u2193" })
|
|
466
451
|
] })
|
|
467
452
|
] })
|
|
468
453
|
] }) })
|
|
469
454
|
] })
|
|
470
455
|
] }),
|
|
471
|
-
/* @__PURE__ */ (
|
|
456
|
+
/* @__PURE__ */ jsx2(
|
|
472
457
|
"button",
|
|
473
458
|
{
|
|
474
459
|
onClick: () => setIsRulesOpen(!isRulesOpen),
|
|
475
460
|
className: `flex items-center justify-center w-12 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 ${isRulesOpen ? "rotate-90" : "rotate-0"}`,
|
|
476
461
|
"aria-label": "Toggle Settings",
|
|
477
|
-
children: /* @__PURE__ */ (
|
|
462
|
+
children: /* @__PURE__ */ jsx2(Cog, { className: "w-5 h-5" })
|
|
478
463
|
}
|
|
479
464
|
)
|
|
480
465
|
] })
|
|
@@ -482,7 +467,13 @@ function ScreenplayEditorView({
|
|
|
482
467
|
}
|
|
483
468
|
|
|
484
469
|
// app/hook/use-screenplay-editor.ts
|
|
485
|
-
|
|
470
|
+
import {
|
|
471
|
+
useState as useState2,
|
|
472
|
+
useRef,
|
|
473
|
+
useEffect,
|
|
474
|
+
useMemo,
|
|
475
|
+
useCallback
|
|
476
|
+
} from "react";
|
|
486
477
|
|
|
487
478
|
// app/service/screenplay-editor.service.ts
|
|
488
479
|
function getNextBlockType(currentType) {
|
|
@@ -604,18 +595,18 @@ function setCaretPosition(element, offset) {
|
|
|
604
595
|
sel.addRange(range);
|
|
605
596
|
}
|
|
606
597
|
function useScreenplayEditor() {
|
|
607
|
-
const [blocks, setBlocks] = (
|
|
608
|
-
const refs =
|
|
609
|
-
const [focusedBlockId, setFocusedBlockId] = (
|
|
598
|
+
const [blocks, setBlocks] = useState2(initialBlocks);
|
|
599
|
+
const refs = useRef({});
|
|
600
|
+
const [focusedBlockId, setFocusedBlockId] = useState2(
|
|
610
601
|
initialBlocks[0].id
|
|
611
602
|
);
|
|
612
|
-
const [newBlockId, setNewBlockId] = (
|
|
613
|
-
const [showSuggestions, setShowSuggestions] = (
|
|
614
|
-
const blurTimeout =
|
|
615
|
-
const [isPageSplitEnabled, setIsPageSplitEnabled] = (
|
|
616
|
-
const [pageBreaks, setPageBreaks] = (
|
|
617
|
-
const focusStateRef =
|
|
618
|
-
const togglePageSplit =
|
|
603
|
+
const [newBlockId, setNewBlockId] = useState2(null);
|
|
604
|
+
const [showSuggestions, setShowSuggestions] = useState2(false);
|
|
605
|
+
const blurTimeout = useRef(null);
|
|
606
|
+
const [isPageSplitEnabled, setIsPageSplitEnabled] = useState2(false);
|
|
607
|
+
const [pageBreaks, setPageBreaks] = useState2([]);
|
|
608
|
+
const focusStateRef = useRef(null);
|
|
609
|
+
const togglePageSplit = useCallback(() => {
|
|
619
610
|
if (focusedBlockId && document.activeElement && document.activeElement.hasAttribute("contenteditable")) {
|
|
620
611
|
const el = refs.current[focusedBlockId];
|
|
621
612
|
if (el) {
|
|
@@ -625,15 +616,15 @@ function useScreenplayEditor() {
|
|
|
625
616
|
}
|
|
626
617
|
setIsPageSplitEnabled((prev) => !prev);
|
|
627
618
|
}, [focusedBlockId]);
|
|
628
|
-
const locations =
|
|
619
|
+
const locations = useMemo(() => {
|
|
629
620
|
const locs = blocks.filter((b) => b.type === "SCENE_HEADING" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
|
|
630
621
|
return [...new Set(locs)];
|
|
631
622
|
}, [blocks]);
|
|
632
|
-
const characters =
|
|
623
|
+
const characters = useMemo(() => {
|
|
633
624
|
const chars = blocks.filter((b) => b.type === "CHARACTER" && b.text.trim() !== "").map((b) => b.text.trim().toUpperCase());
|
|
634
625
|
return [...new Set(chars)];
|
|
635
626
|
}, [blocks]);
|
|
636
|
-
const sceneNumbers =
|
|
627
|
+
const sceneNumbers = useMemo(() => {
|
|
637
628
|
const map = {};
|
|
638
629
|
let count = 0;
|
|
639
630
|
blocks.forEach((block) => {
|
|
@@ -644,7 +635,7 @@ function useScreenplayEditor() {
|
|
|
644
635
|
});
|
|
645
636
|
return map;
|
|
646
637
|
}, [blocks]);
|
|
647
|
-
|
|
638
|
+
useEffect(() => {
|
|
648
639
|
var _a;
|
|
649
640
|
if (newBlockId && refs.current[newBlockId]) {
|
|
650
641
|
(_a = refs.current[newBlockId]) == null ? void 0 : _a.focus();
|
|
@@ -652,7 +643,7 @@ function useScreenplayEditor() {
|
|
|
652
643
|
setNewBlockId(null);
|
|
653
644
|
}
|
|
654
645
|
}, [newBlockId]);
|
|
655
|
-
|
|
646
|
+
useEffect(() => {
|
|
656
647
|
blocks.forEach((block) => {
|
|
657
648
|
const element = refs.current[block.id];
|
|
658
649
|
if (element && element.innerText !== block.text && document.activeElement !== element) {
|
|
@@ -660,7 +651,7 @@ function useScreenplayEditor() {
|
|
|
660
651
|
}
|
|
661
652
|
});
|
|
662
653
|
}, [blocks, isPageSplitEnabled, pageBreaks]);
|
|
663
|
-
|
|
654
|
+
useEffect(() => {
|
|
664
655
|
if (!isPageSplitEnabled) {
|
|
665
656
|
setPageBreaks([]);
|
|
666
657
|
return;
|
|
@@ -727,7 +718,7 @@ function useScreenplayEditor() {
|
|
|
727
718
|
}, 300);
|
|
728
719
|
return () => clearTimeout(timeoutId);
|
|
729
720
|
}, [blocks, isPageSplitEnabled, focusedBlockId]);
|
|
730
|
-
const pages =
|
|
721
|
+
const pages = useMemo(() => {
|
|
731
722
|
if (!isPageSplitEnabled || pageBreaks.length === 0) return [blocks];
|
|
732
723
|
const result = [];
|
|
733
724
|
let currentPage = [];
|
|
@@ -741,7 +732,7 @@ function useScreenplayEditor() {
|
|
|
741
732
|
if (currentPage.length > 0) result.push(currentPage);
|
|
742
733
|
return result;
|
|
743
734
|
}, [blocks, isPageSplitEnabled, pageBreaks]);
|
|
744
|
-
|
|
735
|
+
useEffect(() => {
|
|
745
736
|
if (focusStateRef.current) {
|
|
746
737
|
const { id, offset } = focusStateRef.current;
|
|
747
738
|
const el = refs.current[id];
|
|
@@ -752,10 +743,10 @@ function useScreenplayEditor() {
|
|
|
752
743
|
focusStateRef.current = null;
|
|
753
744
|
}
|
|
754
745
|
}, [pages]);
|
|
755
|
-
const handleBlockTextChange =
|
|
746
|
+
const handleBlockTextChange = useCallback((id, text) => {
|
|
756
747
|
setBlocks((bs) => updateBlock(bs, id, "text", text));
|
|
757
748
|
}, []);
|
|
758
|
-
const handleSceneTypeChange =
|
|
749
|
+
const handleSceneTypeChange = useCallback(
|
|
759
750
|
(id, sceneType) => {
|
|
760
751
|
setBlocks(
|
|
761
752
|
(bs) => updateBlock(bs, id, "sceneType", sceneType)
|
|
@@ -768,7 +759,7 @@ function useScreenplayEditor() {
|
|
|
768
759
|
},
|
|
769
760
|
[]
|
|
770
761
|
);
|
|
771
|
-
const handleTimeOfDayChange =
|
|
762
|
+
const handleTimeOfDayChange = useCallback((id, time) => {
|
|
772
763
|
setBlocks((bs) => updateBlock(bs, id, "timeOfDay", time));
|
|
773
764
|
setTimeout(() => {
|
|
774
765
|
var _a;
|
|
@@ -776,7 +767,7 @@ function useScreenplayEditor() {
|
|
|
776
767
|
setFocusedBlockId(id);
|
|
777
768
|
}, 10);
|
|
778
769
|
}, []);
|
|
779
|
-
const handleBlockTypeChange =
|
|
770
|
+
const handleBlockTypeChange = useCallback(
|
|
780
771
|
(newType) => {
|
|
781
772
|
if (!focusedBlockId) return;
|
|
782
773
|
setBlocks(
|
|
@@ -815,7 +806,7 @@ function useScreenplayEditor() {
|
|
|
815
806
|
return updateBlock(bs, id, "type", blockTypes[newIdx]);
|
|
816
807
|
});
|
|
817
808
|
};
|
|
818
|
-
const handleKeyDown =
|
|
809
|
+
const handleKeyDown = useCallback(
|
|
819
810
|
(e, id, text) => {
|
|
820
811
|
var _a;
|
|
821
812
|
if ((e.key === "Backspace" || e.key === "Delete") && text.length <= 1) {
|
|
@@ -926,14 +917,14 @@ function useScreenplayEditor() {
|
|
|
926
917
|
},
|
|
927
918
|
[blocks]
|
|
928
919
|
);
|
|
929
|
-
const handleFocus =
|
|
920
|
+
const handleFocus = useCallback((id) => {
|
|
930
921
|
if (blurTimeout.current) {
|
|
931
922
|
clearTimeout(blurTimeout.current);
|
|
932
923
|
}
|
|
933
924
|
setFocusedBlockId(id);
|
|
934
925
|
setShowSuggestions(true);
|
|
935
926
|
}, []);
|
|
936
|
-
const handleBlur =
|
|
927
|
+
const handleBlur = useCallback((id) => {
|
|
937
928
|
if (document.activeElement === refs.current[id]) return;
|
|
938
929
|
blurTimeout.current = setTimeout(() => setShowSuggestions(false), 200);
|
|
939
930
|
}, []);
|
|
@@ -957,8 +948,7 @@ function useScreenplayEditor() {
|
|
|
957
948
|
handleBlur
|
|
958
949
|
};
|
|
959
950
|
}
|
|
960
|
-
|
|
961
|
-
0 && (module.exports = {
|
|
951
|
+
export {
|
|
962
952
|
ScreenplayEditorView,
|
|
963
953
|
blockStyles,
|
|
964
954
|
blockTypes,
|
|
@@ -966,5 +956,5 @@ function useScreenplayEditor() {
|
|
|
966
956
|
timeOfDayOptions,
|
|
967
957
|
useScreenplayEditor,
|
|
968
958
|
uuid
|
|
969
|
-
}
|
|
959
|
+
};
|
|
970
960
|
//# sourceMappingURL=index.js.map
|