Skip to content

Commit 2ee5cfc

Browse files
tefkahtefkah
committed
fix(serialization): sort of fix loading
1 parent fb3b112 commit 2ee5cfc

2 files changed

Lines changed: 99 additions & 79 deletions

File tree

‎core/app/components/forms/elements/ContextEditorElement.tsx‎

Lines changed: 11 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,25 @@
11
"use client";
22

3-
import type { Node } from "prosemirror-model";
4-
5-
import { useMemo, useState } from "react";
3+
import dynamic from "next/dynamic";
64
import { Value } from "@sinclair/typebox/value";
7-
import { docHasChanged } from "context-editor/utils";
85
import { useFormContext } from "react-hook-form";
96
import { richTextInputConfigSchema } from "schemas";
107

118
import { InputComponent } from "db/public";
12-
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "ui/form";
9+
import { FormField } from "ui/form";
10+
import { Skeleton } from "ui/skeleton";
1311

1412
import type { ElementProps } from "../types";
15-
import { fromHTMLToNode, renderNodeToHTML } from "~/lib/editor/serialization/client";
16-
import { ContextEditorClient } from "../../ContextEditor/ContextEditorClient";
17-
import { useContextEditorContext } from "../../ContextEditor/ContextEditorContext";
13+
import { renderNodeToHTML } from "~/lib/editor/serialization/client";
1814
import { useFormElementToggleContext } from "../FormElementToggleContext";
1915

20-
const EMPTY_DOC = {
21-
type: "doc",
22-
attrs: {
23-
meta: {},
24-
},
25-
content: [
26-
{
27-
type: "paragraph",
28-
attrs: {
29-
id: null,
30-
class: null,
31-
},
32-
},
33-
],
34-
};
35-
36-
const EditorFormElement = ({
37-
label,
38-
help,
39-
onChange,
40-
initialValue,
41-
disabled,
42-
}: {
43-
label: string;
44-
help?: string;
45-
onChange: (state: any) => void;
46-
initialValue?: string;
47-
disabled?: boolean;
48-
}) => {
49-
const { pubs, pubTypes, pubId, pubTypeId } = useContextEditorContext();
50-
const [initialHTML] = useState(initialValue);
51-
const initialDoc = useMemo(
52-
() => (initialHTML ? fromHTMLToNode(initialHTML) : undefined),
53-
[initialHTML]
54-
);
55-
console.log(initialDoc);
56-
57-
if (!pubId || !pubTypeId) {
58-
return null;
16+
const LazyContextEditorElement = dynamic(
17+
() => import("./ContextEditorLazyElement").then((mod) => mod.EditorFormElementLazy),
18+
{
19+
ssr: false,
20+
loading: () => <Skeleton className="h-16 w-full" />,
5921
}
60-
61-
return (
62-
<FormItem>
63-
<FormLabel className="flex">{label}</FormLabel>
64-
<div className="w-full">
65-
<FormControl>
66-
<ContextEditorClient
67-
pubId={pubId}
68-
pubs={pubs}
69-
pubTypes={pubTypes}
70-
pubTypeId={pubTypeId}
71-
onChange={(state) => {
72-
// Control changing the state more granularly or else the dirty field will trigger on load
73-
// Since we can't control the dirty state directly, even this workaround does not handle the case of
74-
// if someone changes the doc but then reverts it--that will still count as dirty since react-hook-form is tracking that
75-
const hasChanged = docHasChanged(initialDoc ?? EMPTY_DOC, state);
76-
if (hasChanged) {
77-
onChange(state);
78-
}
79-
}}
80-
initialDoc={initialDoc}
81-
disabled={disabled}
82-
className="max-h-96 overflow-scroll"
83-
/>
84-
</FormControl>
85-
</div>
86-
<FormDescription>{help}</FormDescription>
87-
<FormMessage />
88-
</FormItem>
89-
);
90-
};
22+
);
9123

9224
export const ContextEditorElement = ({
9325
slug,
@@ -109,7 +41,7 @@ export const ContextEditorElement = ({
10941
name={slug}
11042
render={({ field }) => {
11143
return (
112-
<EditorFormElement
44+
<LazyContextEditorElement
11345
label={label}
11446
help={config.help}
11547
onChange={(state) => {

‎core/app/components/forms/elements/ContextEditorLazyElement.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { useMemo, useState } from "react";
2+
import { docHasChanged } from "context-editor/utils";
3+
4+
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "ui/form";
5+
6+
import { fromHTMLToNode } from "~/lib/editor/serialization/client";
7+
import { ContextEditorClient } from "../../ContextEditor/ContextEditorClient";
8+
import { useContextEditorContext } from "../../ContextEditor/ContextEditorContext";
9+
10+
const EMPTY_DOC = {
11+
type: "doc",
12+
attrs: {
13+
meta: {},
14+
},
15+
content: [
16+
{
17+
type: "paragraph",
18+
attrs: {
19+
id: null,
20+
class: null,
21+
},
22+
},
23+
],
24+
};
25+
export const EditorFormElementLazy = ({
26+
label,
27+
help,
28+
onChange,
29+
initialValue,
30+
disabled,
31+
}: {
32+
label: string;
33+
help?: string;
34+
onChange: (state: any) => void;
35+
initialValue?: string;
36+
disabled?: boolean;
37+
}) => {
38+
const { pubs, pubTypes, pubId, pubTypeId } = useContextEditorContext();
39+
const [initialHTML] = useState(initialValue);
40+
const initialDoc = useMemo(
41+
() => (initialHTML ? fromHTMLToNode(initialHTML) : undefined),
42+
[initialHTML]
43+
);
44+
45+
if (!pubId || !pubTypeId) {
46+
return null;
47+
}
48+
49+
return (
50+
<FormItem>
51+
<FormLabel className="flex">{label}</FormLabel>
52+
<div className="w-full">
53+
<FormControl>
54+
<ContextEditorClient
55+
pubId={pubId}
56+
pubs={pubs}
57+
pubTypes={pubTypes}
58+
pubTypeId={pubTypeId}
59+
onChange={(state) => {
60+
// Control changing the state more granularly or else the dirty field will trigger on load
61+
// Since we can't control the dirty state directly, even this workaround does not handle the case of
62+
// if someone changes the doc but then reverts it--that will still count as dirty since react-hook-form is tracking that
63+
const doc = initialDoc
64+
? EMPTY_DOC
65+
: // ? {
66+
// type: "doc",
67+
// content: initialDoc.content.content,
68+
// attrs: {
69+
// meta: {},
70+
// },
71+
// }
72+
EMPTY_DOC;
73+
const hasChanged = docHasChanged(doc, state);
74+
if (hasChanged) {
75+
onChange(state);
76+
}
77+
}}
78+
initialDoc={initialDoc}
79+
disabled={disabled}
80+
className="max-h-96 overflow-scroll"
81+
/>
82+
</FormControl>
83+
</div>
84+
<FormDescription>{help}</FormDescription>
85+
<FormMessage />
86+
</FormItem>
87+
);
88+
};

0 commit comments

Comments
 (0)