Skip to content

Commit dea00e8

Browse files
lpeyrlpeyr
committed
Added Novel editor as default for View page (#1401)
1 parent 2aae37b commit dea00e8

File tree

6 files changed

+228
-144
lines changed

6 files changed

+228
-144
lines changed

‎app/[lng]/generations/edit/editpage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default function GenerationEditPage({
3838
<h1 className="text-3xl font-semibold">{t("edit")}</h1>
3939
</header>
4040

41-
<section className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[1fr_300px] lg:grid-cols-[1fr_350px]">
41+
<section className="edit mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[1fr_300px] lg:grid-cols-[1fr_350px]">
4242
<TailwindEditor id={+id} lng={lng} content={c} />
4343
<div className="grid gap-6 print:hidden">
4444
<Card>

‎app/[lng]/generations/view/viewpage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export default function GenerationViewPage({
135135
</header>
136136
<section className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[1fr_300px] lg:grid-cols-[1fr_350px]">
137137
<div
138-
className="max-w-[800px] rounded-md border bg-white pb-4 text-justify shadow-sm dark:bg-slate-900 dark:bg-slate-900/50 print:border-0 print:text-black print:shadow-none"
138+
className="edit max-w-[800px] rounded-md border bg-white p-0 text-justify shadow-sm dark:bg-slate-900 dark:bg-slate-900/50 print:border-0 print:text-black print:shadow-none"
139139
id="ct"
140140
>
141141
<ResultDisplayer

‎app/[lng]/globals.css

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,55 @@ h3 {
116116
line-height: 1.75rem; /* 28px */
117117
}
118118

119+
.ProseMirror {
120+
h1 {
121+
font-size: 1.5rem; /* 24px */
122+
line-height: 2rem; /* 32px */
123+
}
124+
125+
h2 {
126+
font-size: 1.25rem; /* 20px */
127+
line-height: 1.75rem; /* 28px */
128+
}
129+
130+
h3 {
131+
font-size: 1.125rem; /* 18px */
132+
line-height: 1.75rem; /* 28px */
133+
}
134+
135+
p {
136+
font-size: 1rem;
137+
}
138+
}
139+
140+
/* Print view */
141+
@media print {
142+
body {
143+
font-size: 12px;
144+
}
145+
146+
.ProseMirror {
147+
h1 {
148+
font-size: 1.5rem; /* 24px */
149+
line-height: 2rem; /* 32px */
150+
}
151+
152+
h2 {
153+
font-size: 1.25rem; /* 20px */
154+
line-height: 1.75rem; /* 28px */
155+
}
156+
157+
h3 {
158+
font-size: 1.125rem; /* 18px */
159+
line-height: 1.75rem; /* 28px */
160+
}
161+
162+
p {
163+
font-size: 1rem;
164+
}
165+
}
166+
}
167+
119168
.bg-mesh {
120169
background: url("/MeshLight.svg");
121170
background-size: cover;
@@ -233,7 +282,7 @@ html.dark table.features td:not(:first-child) {
233282
border-left: 1px solid rgb(15 23 42);
234283
}
235284

236-
.ProseMirror {
285+
.edit .ProseMirror {
237286
@apply p-12 px-8 sm:px-12;
238287
}
239288

‎components/result-displayer.tsx

Lines changed: 51 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import { Check } from "lucide-react";
33
import parse, { HTMLReactParserOptions, Element } from "html-react-parser";
44
import { OutlineItem } from "@/lib/formats";
55
import { FontType } from "@/lib/settings";
6+
import { defaultExtensions } from "@/lib/editor-extensions";
7+
import { generateJSON } from "@tiptap/html";
8+
import TailwindEditor from "./tailwind-editor";
69

710
export default function ResultDisplayer(props: {
811
res: string;
@@ -120,30 +123,55 @@ export default function ResultDisplayer(props: {
120123
}
121124
default:
122125
return (
123-
<p
124-
className={`${props.no_padding ? "" : "p-4"} ${props.font && props.font !== "default" ? "font-" + props.font : ""} print:text-black`}
125-
id="contentp"
126-
>
127-
{parse(
128-
props.res
129-
.replaceAll("<body>", "")
130-
.replaceAll("</body>", "")
131-
.replaceAll("<html>", "")
132-
.replaceAll("</html>", "")
133-
.replaceAll("<!DOCTYPE html>", "")
134-
.replaceAll("\n\n", "<br>")
135-
.replaceAll("\n\n\n", "\n")
136-
.replaceAll("\n \n", "<br>")
137-
.replaceAll("\n", "<br>")
138-
.replaceAll("```html", "")
139-
.replaceAll("```", "")
140-
.replaceAll("<br><br>", ""),
141-
options,
142-
)}
143-
{props.is_generating && (
144-
<span className="inline-block h-[14px] w-[7px] animate-pulse self-baseline bg-black duration-500 dark:bg-white"></span>
126+
<>
127+
{props.is_generating ? (
128+
<p
129+
className={`${props.no_padding ? "" : "p-4"} ${props.font && props.font !== "default" ? "font-" + props.font : ""} print:text-black`}
130+
id="contentp"
131+
>
132+
{parse(
133+
props.res
134+
.replaceAll("<body>", "")
135+
.replaceAll("</body>", "")
136+
.replaceAll("<html>", "")
137+
.replaceAll("</html>", "")
138+
.replaceAll("<!DOCTYPE html>", "")
139+
.replaceAll("\n\n", "<br>")
140+
.replaceAll("\n\n\n", "\n")
141+
.replaceAll("\n \n", "<br>")
142+
.replaceAll("\n", "<br>")
143+
.replaceAll("```html", "")
144+
.replaceAll("```", "")
145+
.replaceAll("<br><br>", ""),
146+
)}
147+
<span className="inline-block h-[14px] w-[7px] animate-pulse self-baseline bg-black duration-500 dark:bg-white"></span>
148+
</p>
149+
) : (
150+
<TailwindEditor
151+
lng={"en"}
152+
id={-1}
153+
content={generateJSON(
154+
props.res
155+
.replaceAll("<body>", "")
156+
.replaceAll("</body>", "")
157+
.replaceAll("<html>", "")
158+
.replaceAll("</html>", "")
159+
.replaceAll("<!DOCTYPE html>", "")
160+
.replaceAll("\n\n", "<br>")
161+
.replaceAll("\n\n\n", "\n")
162+
.replaceAll("\n \n", "<br>")
163+
.replaceAll("\n", "<br>")
164+
.replaceAll("```html", "")
165+
.replaceAll("```", "")
166+
.replaceAll("<br><br>", ""),
167+
[...defaultExtensions],
168+
{},
169+
)}
170+
enabled={false}
171+
editorOnly={true}
172+
/>
145173
)}
146-
</p>
174+
</>
147175
);
148176
}
149177
}

‎components/tailwind-editor.tsx

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ interface EditorProps {
4747
content: JSONContent;
4848
lng: string;
4949
id: number;
50+
enabled?: boolean;
51+
editorOnly?: boolean;
5052
}
5153

5254
export default function TailwindEditor(props: EditorProps) {
@@ -71,21 +73,26 @@ export default function TailwindEditor(props: EditorProps) {
7173
}
7274
return (
7375
<div className="space-y-2">
74-
<div className="mx-2 flex rounded-md border sm:mx-0 sm:rounded-lg">
75-
<TooltipProvider>
76-
<Tooltip>
77-
<TooltipTrigger>
78-
<Button onClick={saveContent} variant="ghost">
79-
<Save size={15} />
80-
</Button>
81-
</TooltipTrigger>
82-
<TooltipContent>{t("save")}</TooltipContent>
83-
</Tooltip>
84-
</TooltipProvider>
85-
</div>
76+
{props.editorOnly ? (
77+
<></>
78+
) : (
79+
<div className="mx-2 flex rounded-md border sm:mx-0 sm:rounded-lg">
80+
<TooltipProvider>
81+
<Tooltip>
82+
<TooltipTrigger>
83+
<Button onClick={saveContent} variant="ghost">
84+
<Save size={15} />
85+
</Button>
86+
</TooltipTrigger>
87+
<TooltipContent>{t("save")}</TooltipContent>
88+
</Tooltip>
89+
</TooltipProvider>
90+
</div>
91+
)}
8692
<EditorRoot>
8793
<EditorContent
88-
className="relative min-h-[500px] w-full max-w-screen-lg border bg-background sm:mb-[calc(20vh)] sm:rounded-lg"
94+
editable={props.enabled ?? true}
95+
className={`relative w-full max-w-screen-lg ${!props.editorOnly && "min-h-[500px] border bg-background sm:mb-[calc(20vh)]"} sm:rounded-lg`}
8996
extensions={extensions}
9097
editorProps={{
9198
handleDOMEvents: {

0 commit comments

Comments
 (0)