Text renderer based on page-primitives; Table block for editor and renderer; table-of-content component; editor ui tweaks;

Author: Rajat

apps/web/app/(with-contexts)/(with-layout)/blog/[slug]/[id]/client-side-text-renderer.tsx

@@ -1,7 +1,20 @@
 "use client";
 
-import { TextRenderer } from "@courselit/components-library";
+import { TextRenderer } from "@courselit/page-blocks";
+import { ThemeStyle } from "@courselit/page-models";
+import { TableOfContent } from "@components/table-of-content";
 
-export default function ClientSideTextRenderer({ json }: { json: any }) {
-    return <TextRenderer json={json} showTableOfContent={true} />;
+export default function ClientSideTextRenderer({
+    json,
+    theme,
+}: {
+    json: any;
+    theme: ThemeStyle;
+}) {
+    return (
+        <div className="flex flex-col gap-4">
+            <TableOfContent json={json} theme={theme} />
+            <TextRenderer json={json} theme={theme} />
+        </div>
+    );
 }

apps/web/app/(with-contexts)/(with-layout)/blog/[slug]/[id]/page.tsx

@@ -1,5 +1,5 @@
 import { Course } from "@courselit/common-models";
-import { Caption, Header1, Section, Text1 } from "@courselit/page-primitives";
+import { Caption, Header1, Section } from "@courselit/page-primitives";
 import { formattedLocaleDate, getFullSiteSetup } from "@ui-lib/utils";
 import { getAddressFromHeaders } from "@/app/actions";
 import { headers } from "next/headers";
@@ -96,11 +96,10 @@ export default async function ProductPage(props: {
                     </div>
                 )}
                 {product?.description && (
-                    <Text1 theme={theme.theme} component="span">
-                        <ClientSideTextRenderer
-                            json={JSON.parse(product.description)}
-                        />
-                    </Text1>
+                    <ClientSideTextRenderer
+                        json={JSON.parse(product.description)}
+                        theme={theme.theme}
+                    />
                 )}
             </div>
         </Section>

apps/web/app/(with-contexts)/course/[slug]/[id]/page.tsx

@@ -14,18 +14,20 @@ import {
     Link,
     Button2,
     getSymbolFromCurrency,
-    TextRenderer,
-    TextEditorEmptyDoc,
     Image,
 } from "@courselit/components-library";
+import { TextRenderer } from "@courselit/page-blocks";
+import { TableOfContent } from "@components/table-of-content";
 import {
     AddressContext,
     ProfileContext,
     SiteInfoContext,
+    ThemeContext,
 } from "@components/contexts";
 import { getProduct } from "./helpers";
 import { getUserProfile } from "@/app/(with-contexts)/helpers";
 import { BadgeCheck } from "lucide-react";
+import { emptyDoc as TextEditorEmptyDoc } from "@courselit/text-editor";
 const { permissions } = UIConstants;
 
 export default function ProductPage(props: {
@@ -38,6 +40,7 @@ export default function ProductPage(props: {
     const siteInfo = useContext(SiteInfoContext);
     const address = useContext(AddressContext);
     const [progress, setProgress] = useState<any>(null);
+    const { theme } = useContext(ThemeContext);
 
     useEffect(() => {
         if (id) {
@@ -68,6 +71,10 @@ export default function ProductPage(props: {
         return null;
     }
 
+    const descriptionJson = product.description
+        ? JSON.parse(product.description)
+        : TextEditorEmptyDoc;
+
     return (
         <div className="flex flex-col pb-[100px] lg:max-w-[40rem] xl:max-w-[48rem] mx-auto">
             <h1 className="text-4xl font-semibold mb-8">{product.title}</h1>
@@ -118,14 +125,13 @@ export default function ProductPage(props: {
                 </div>
             )}
             <div className="overflow-hidden min-h-[360px]">
-                <TextRenderer
-                    json={
-                        product.description
-                            ? JSON.parse(product.description)
-                            : TextEditorEmptyDoc
-                    }
-                    showTableOfContent={true}
-                />
+                <div className="flex flex-col gap-4">
+                    <TableOfContent
+                        json={descriptionJson}
+                        theme={theme.theme}
+                    />
+                    <TextRenderer json={descriptionJson} theme={theme.theme} />
+                </div>
             </div>
             {isEnrolled(product.courseId, profile as Profile) && (
                 <div className="self-end">

apps/web/app/(with-contexts)/dashboard/(sidebar)/community/[id]/manage/page.tsx

@@ -4,7 +4,6 @@ import DashboardContent from "@components/admin/dashboard-content";
 import {
     AddressContext,
     ProfileContext,
-    SiteInfoContext,
 } from "@components/contexts";
 import {
     COMMUNITY_HEADER,
@@ -31,8 +30,6 @@ import {
     Image,
     Link,
     MediaSelector,
-    TextEditor,
-    TextEditorEmptyDoc,
     useToast,
 } from "@courselit/components-library";
 import { Separator } from "@components/ui/separator";
@@ -72,6 +69,7 @@ import { Input } from "@/components/ui/input";
 import { redirect, useRouter } from "next/navigation";
 import { useMembership } from "@/hooks/use-membership";
 import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
+import { Editor, emptyDoc as TextEditorEmptyDoc } from "@courselit/text-editor";
 const { PaymentPlanType: paymentPlanType, MembershipEntityType } = Constants;
 
 export default function Page(props: {
@@ -90,7 +88,6 @@ export default function Page(props: {
     ];
     const { profile } = useContext(ProfileContext);
     const address = useContext(AddressContext);
-    const siteinfo = useContext(SiteInfoContext);
 
     const [name, setName] = useState("");
     const [enabled, setEnabled] = useState(false);
@@ -565,7 +562,7 @@ export default function Page(props: {
                     />
                     <div>
                         <h2 className="font-semibold">Description</h2>
-                        <TextEditor
+                        <Editor
                             initialContent={description}
                             onChange={(state: any) => setDescription(state)}
                             showToolbar={false}

apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/lesson/page.tsx

@@ -51,12 +51,7 @@ import {
     TextEditorContent,
     UIConstants,
 } from "@courselit/common-models";
-import {
-    MediaSelector,
-    TextEditor,
-    TextEditorEmptyDoc,
-    useToast,
-} from "@courselit/components-library";
+import { MediaSelector, useToast } from "@courselit/components-library";
 import {
     MIMETYPE_VIDEO,
     MIMETYPE_AUDIO,
@@ -67,6 +62,7 @@ import { QuizBuilder } from "@components/admin/products/quiz-builder";
 import { isTextEditorNonEmpty, truncate } from "@ui-lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Separator } from "@components/ui/separator";
+import { Editor, emptyDoc as TextEditorEmptyDoc } from "@courselit/text-editor";
 
 const { permissions } = UIConstants;
 
@@ -214,7 +210,7 @@ export default function LessonPage() {
             case Constants.LessonType.TEXT:
                 return (
                     <div className="space-y-2">
-                        <TextEditor
+                        <Editor
                             initialContent={textContent}
                             refresh={refresh}
                             onChange={(state: any) => {

apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/manage/components/product-details.tsx

@@ -5,11 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import {
-    TextEditor,
-    TextEditorEmptyDoc,
-    useToast,
-} from "@courselit/components-library";
+import { useToast } from "@courselit/components-library";
 import { AddressContext } from "@components/contexts";
 import {
     APP_MESSAGE_COURSE_SAVED,
@@ -20,6 +16,7 @@ import {
 } from "@ui-config/strings";
 import { useGraphQLFetch } from "@/hooks/use-graphql-fetch";
 import { Save, Loader2 } from "lucide-react";
+import { Editor, emptyDoc as TextEditorEmptyDoc } from "@courselit/text-editor";
 
 const MUTATION_UPDATE_BASIC_DETAILS = `
     mutation UpdateBasicDetails($courseId: String!, $title: String!, $description: String!) {
@@ -131,7 +128,7 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
                         Description
                     </Label>
 
-                    <TextEditor
+                    <Editor
                         initialContent={formData.description}
                         onChange={(state: any) => {
                             handleInputChange({

apps/web/components/admin/blogs/editor/details.tsx

@@ -1,8 +1,6 @@
 import React, { FormEvent, useContext, useEffect, useState } from "react";
 import {
     MediaSelector,
-    TextEditor,
-    TextEditorEmptyDoc,
     Form,
     FormField,
     Button,
@@ -23,6 +21,7 @@ import {
 import { MIMETYPE_IMAGE } from "@/ui-config/constants";
 import { Media, Profile } from "@courselit/common-models";
 import { AddressContext, ProfileContext } from "@components/contexts";
+import { Editor, emptyDoc as TextEditorEmptyDoc } from "@courselit/text-editor";
 
 interface DetailsProps {
     id: string;
@@ -145,7 +144,7 @@ export default function Details({ id }: DetailsProps) {
                     onChange={(e) => setTitle(e.target.value)}
                 />
                 <PageBuilderPropertyHeader label={COURSE_CONTENT_HEADER} />
-                <TextEditor
+                <Editor
                     initialContent={description}
                     refresh={refreshDetails}
                     onChange={(state: any) => setDescription(state)}

apps/web/components/admin/page-editor/theme-editor/interactive-selector.tsx

@@ -421,7 +421,7 @@ function InteractiveSelector({
                             <Info className="h-4 w-4" />
                             <span>
                                 Use any supported Tailwind class here.{" "}
-                                <DocumentationLink path="/en/theme/customization" />
+                                <DocumentationLink path="/en/website/themes#supported-tailwind-classes" />
                             </span>
                         </div>
                     </div>

apps/web/components/community/banner.tsx

@@ -2,16 +2,13 @@ import { useState, useEffect, useRef, useContext } from "react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle, Pencil, Check, X, Loader2 } from "lucide-react";
-import {
-    TextEditor,
-    TextEditorEmptyDoc,
-    TextRenderer,
-    useToast,
-} from "@courselit/components-library";
+import { useToast } from "@courselit/components-library";
+import { TextRenderer } from "@courselit/page-blocks";
 import { isTextEditorNonEmpty } from "@ui-lib/utils";
 import { BUTTON_SAVING, TOAST_TITLE_SUCCESS } from "@ui-config/strings";
 import { AddressContext } from "@components/contexts";
 import type { TextEditorContent } from "@courselit/common-models";
+import { Editor, emptyDoc as TextEditorEmptyDoc } from "@courselit/text-editor";
 
 interface BannerComponentProps {
     canEdit: boolean;
@@ -116,10 +113,12 @@ export default function Banner({
                     </>
                 ) : (
                     <div className="space-y-2">
-                        <TextEditor
+                        <Editor
                             showToolbar={false}
                             initialContent={editedBannerText}
-                            onChange={(value) => setEditedBannerText(value)}
+                            onChange={(value) =>
+                                setEditedBannerText(value as TextEditorContent)
+                            }
                             url={address.backend}
                         />
                         <div className="flex justify-end space-x-2">

apps/web/components/community/info.tsx

@@ -14,13 +14,14 @@ import {
     FormField,
     getSymbolFromCurrency,
     Link,
-    TextRenderer,
     useToast,
 } from "@courselit/components-library";
+import { TextRenderer } from "@courselit/page-blocks";
 import {
     AddressContext,
     ProfileContext,
     SiteInfoContext,
+    ThemeContext,
 } from "@components/contexts";
 import {
     Dialog,
@@ -74,6 +75,7 @@ export function CommunityInfo({
     const currencySymbol =
         getSymbolFromCurrency(siteinfo.currencyISOCode || "USD") || "$";
     const { toast } = useToast();
+    const { theme } = useContext(ThemeContext);
 
     const handleJoinSubmit = async (e: FormEvent) => {
         e.preventDefault();
@@ -121,7 +123,12 @@ export function CommunityInfo({
                 />
                 <div className="space-y-2">
                     <div className="text-sm text-muted-foreground">
-                        {description && <TextRenderer json={description} />}
+                        {description && (
+                            <TextRenderer
+                                json={description}
+                                theme={theme.theme}
+                            />
+                        )}
                     </div>
                     <p className="text-sm">
                         <strong>{memberCount.toLocaleString()}</strong> members