feat: store richtext data as HTML rather than a Prosemirror tree

core/.prettierignore

@@ -1,2 +1,3 @@
 app/c/\[communitySlug\]/developers/docs/stoplight.styles.css
-vitest-bench.local.json
+vitest-bench.local.json
+**/*.html

core/app/c/[communitySlug]/pubs/[pubId]/components/PubValues.tsx

@@ -14,8 +14,8 @@ import { Button } from "ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "ui/collapsible";
 import { ColorCircle, ColorLabel, ColorValue } from "ui/color";
 import { ChevronDown, ChevronRight } from "ui/icon";
+import { ShowMore } from "ui/show-more";
 
-import type { FileUpload } from "~/lib/fields/fileUpload";
 import { FileUploadPreview } from "~/app/components/forms/FileUpload";
 import { getPubTitle, valuesWithoutTitle } from "~/lib/pubs";
 
@@ -208,8 +208,6 @@ const PubValue = ({ value }: { value: FullProcessedPubWithForm["values"][number]
 		);
 	}
 
-	// Currently, we are only rendering string versions of fields, except for file uploads
-	// For file uploads, because Unjournal doesn't have schemaNames yet, we check the value structure
 	const fileUploadSchema = getJsonSchemaByCoreSchemaType(CoreSchemaType.FileUpload);
 	if (Value.Check(fileUploadSchema, value.value)) {
 		return <FileUploadPreview files={value.value} />;
@@ -222,6 +220,17 @@ const PubValue = ({ value }: { value: FullProcessedPubWithForm["values"][number]
 		}
 	}
 
+	if (value.schemaName === CoreSchemaType.RichText) {
+		return (
+			<ShowMore animate={false}>
+				<div
+					className="prose prose-sm"
+					dangerouslySetInnerHTML={{ __html: value.value as string }}
+				/>
+			</ShowMore>
+		);
+	}
+
 	if (value.schemaName === CoreSchemaType.Color) {
 		return (
 			<ColorLabel>

core/app/components/ContextEditor/ContextEditorClient.tsx

@@ -12,6 +12,8 @@ import { ContextAtom } from "./AtomRenderer";
 
 import "context-editor/style.css";
 
+import React from "react";
+
 import type { ContextEditorPub } from "./ContextEditorContext";
 import { useServerAction } from "~/lib/serverActions";
 
@@ -20,59 +22,54 @@ const ContextEditor = dynamic(() => import("context-editor").then((mod) => mod.C
 	loading: () => <Skeleton className="h-16 w-full" />,
 });
 
-export const ContextEditorClient = ({
-	pubs,
-	pubTypes,
-	pubId,
-	pubTypeId,
-	className,
-	initialDoc,
-	onChange,
-	disabled,
-	hideMenu,
-}: {
-	pubs: ContextEditorPub[];
-	pubTypes: GetPubTypesResult;
-	pubId: PubsId;
-	pubTypeId: PubTypesId;
-	// Might be able to use more of this type in the future—for now, this component is a lil more stricty typed than context-editor
-} & Pick<
-	ContextEditorProps,
-	"onChange" | "initialDoc" | "className" | "disabled" | "hideMenu"
->) => {
+export const ContextEditorClient = (
+	props: {
+		pubs: ContextEditorPub[];
+		pubTypes: GetPubTypesResult;
+		pubId: PubsId;
+		pubTypeId: PubTypesId;
+		// Might be able to use more of this type in the future—for now, this component is a lil more stricty typed than context-editor
+	} & Pick<
+		ContextEditorProps,
+		"onChange" | "initialDoc" | "className" | "disabled" | "hideMenu" | "getterRef"
+	>
+) => {
 	const runUpload = useServerAction(upload);
+
 	const getPubs = useCallback(
 		(filter: string) => {
 			return new Promise<any[]>((resolve, reject) => {
-				resolve(pubs);
+				resolve(props.pubs);
 			});
 		},
-		[pubs]
+		[props.pubs]
 	);
+
 	const signedUploadUrl = (fileName: string) => {
-		return runUpload(pubId, fileName);
+		return runUpload(props.pubId, fileName);
 	};
 
 	const memoEditor = useMemo(() => {
 		return (
 			<ContextEditor
-				pubId={pubId}
-				pubTypeId={pubTypeId}
-				pubTypes={pubTypes}
+				pubId={props.pubId}
+				pubTypeId={props.pubTypeId}
+				pubTypes={props.pubTypes}
 				getPubs={getPubs}
 				getPubById={() => {
 					return {};
 				}}
 				atomRenderingComponent={ContextAtom}
-				onChange={onChange}
-				initialDoc={initialDoc}
-				disabled={disabled}
-				className={className}
-				hideMenu={hideMenu}
+				onChange={props.onChange}
+				initialDoc={props.initialDoc}
+				disabled={props.disabled}
+				className={props.className}
+				hideMenu={props.hideMenu}
 				upload={signedUploadUrl}
+				getterRef={props.getterRef}
 			/>
 		);
-	}, [pubs, pubTypes, disabled]);
+	}, [props.pubs, props.pubTypes, props.disabled]);
 
 	return memoEditor;
 };

core/app/components/ContextEditor/ContextEditorContext.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
+import type { ContextEditorGetter } from "context-editor";
+import type { PropsWithChildren, RefObject } from "react";
 
-import { createContext, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 
 import type { ProcessedPub } from "contracts";
 import type { PubsId, PubTypesId } from "db/public";
@@ -14,11 +15,28 @@ export type ContextEditorContext = {
 	pubTypes: GetPubTypesResult;
 	pubId?: PubsId;
 	pubTypeId?: PubTypesId;
+	/**
+	 * Refs which are able to retrieve the current state of the context editor
+	 * on demand, rather than having the form state manage the value (which is slower)
+	 */
+	contextEditorGetters: ContextEditorGetters;
+	/**
+	 * Register a new context editor getter, which is able to retrieve the current state of the context editor
+	 * on demand, rather than having the form state manage the value (which is slower)
+	 * @param key - The key to register the getter under
+	 * @param ref - The ref to the context editor
+	 */
+	registerGetter: (key: string, ref: ContextEditorGetterRef) => void;
 };
 
+export type ContextEditorGetterRef = RefObject<ContextEditorGetter | null>;
+export type ContextEditorGetters = Record<string, ContextEditorGetterRef>;
+
 const ContextEditorContext = createContext<ContextEditorContext>({
 	pubs: [],
 	pubTypes: [],
+	contextEditorGetters: {},
+	registerGetter: () => {},
 });
 
 export type ContextEditorPub = ProcessedPub<{
@@ -31,12 +49,33 @@ type Props = PropsWithChildren<
 	}
 >;
 
-export const ContextEditorContextProvider = (props: Props) => {
-	const [cachedPubId] = useState(props.pubId);
+export const ContextEditorContextProvider = (
+	props: Omit<Props, "contextEditorGetters" | "registerGetter">
+) => {
+	const cachedPubId = useMemo(() => {
+		return props.pubId;
+	}, [props.pubId]);
+
+	const [contextEditorGetters, setContextEditorGetters] = useState<
+		Record<string, ContextEditorGetterRef>
+	>({});
+
+	const registerGetter = useCallback((key: string, ref: ContextEditorGetterRef) => {
+		setContextEditorGetters((prev) => ({ ...prev, [key]: ref }));
+	}, []);
+
 	const { children, pubId, pubs, ...value } = props;
 
 	return (
-		<ContextEditorContext.Provider value={{ ...value, pubs, pubId: cachedPubId }}>
+		<ContextEditorContext.Provider
+			value={{
+				...value,
+				pubs,
+				pubId: cachedPubId,
+				contextEditorGetters,
+				registerGetter,
+			}}
+		>
 			{children}
 		</ContextEditorContext.Provider>
 	);