Interactivity in page builder

Fixes #651

Author: Rajat

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

@@ -571,6 +571,7 @@ export default function Page(props: {
                             showToolbar={false}
                             url={address.backend}
                             refresh={refresh}
+                            mediaType="community"
                         />
                     </div>
                     <div className="flex items-center justify-between">

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

@@ -222,6 +222,7 @@ export default function LessonPage() {
                             }}
                             url={address.backend}
                             placeholder={TEXT_EDITOR_PLACEHOLDER}
+                            mediaType="lesson"
                         />
                         {errors.content && (
                             <p className="text-sm text-red-500">

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

@@ -143,6 +143,7 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
                         }}
                         url={address.backend}
                         refresh={refresh}
+                        mediaType="course"
                     />
                 </div>
 

apps/web/app/api/media/[mediaId]/[type]/route.ts

@@ -91,10 +91,21 @@ async function isActionAllowed(
     }
 
     switch (type) {
-        case "course":
+        case "course": {
+            const escapedMediaId = mediaId.replace(
+                /[.*+?^${}()|[\]\\]/g, // AI generated
+                "\\$&",
+            );
             const course = await CourseModel.findOne<InternalCourse>({
                 domain: domain._id,
-                "featuredImage.mediaId": mediaId,
+                $or: [
+                    { "featuredImage.mediaId": mediaId },
+                    {
+                        description: new RegExp(
+                            `"mediaId":"${escapedMediaId}"`,
+                        ),
+                    },
+                ],
             });
             if (!course) {
                 return false;
@@ -113,6 +124,7 @@ async function isActionAllowed(
                     ])
                 );
             }
+        }
         case "lesson":
             const lesson = await LessonModel.findOne<Lesson>({
                 domain: domain._id,

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

@@ -150,6 +150,7 @@ export default function Details({ id }: DetailsProps) {
                     onChange={(state: any) => setDescription(state)}
                     url={address.backend}
                     placeholder={TEXT_EDITOR_PLACEHOLDER}
+                    mediaType="course"
                 />
                 <div>
                     <Button type="submit" disabled={loading}>

apps/web/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 /// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited

packages/components-library/src/text-editor.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { WysiwygEditor as TextEditor } from "@courselit/text-editor";
+import type { MediaDeleteType } from "@courselit/text-editor";
 export { emptyDoc } from "@courselit/text-editor";
 
 export interface WysiwygEditorProps {
@@ -10,6 +11,7 @@ export interface WysiwygEditorProps {
     refresh?: number;
     url: string;
     placeholder?: string;
+    mediaType?: MediaDeleteType;
 }
 
 export default function Editor({
@@ -20,6 +22,7 @@ export default function Editor({
     refresh,
     url,
     placeholder,
+    mediaType,
 }: WysiwygEditorProps) {
     return (
         <div className="text-editor">
@@ -32,6 +35,7 @@ export default function Editor({
                 fontFamily={"inherit"}
                 url={url}
                 placeholder={placeholder}
+                mediaType={mediaType}
             />
         </div>
     );

packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx

@@ -138,6 +138,7 @@ export default function CustomSettings({
                             onChange={(state: any) => setDescription(state)}
                             showToolbar={false}
                             url={address.backend}
+                            mediaType="page"
                         />
                     </div>
                 </Form>
@@ -169,6 +170,7 @@ export default function CustomSettings({
                                     }
                                     showToolbar={false}
                                     url={address.backend}
+                                    mediaType="page"
                                 />
                             </div>
                             <FormField

packages/page-blocks/src/blocks/content/admin-widget.tsx

@@ -71,6 +71,7 @@ export default function AdminWidget({
                         onChange={(state: any) => setDescription(state)}
                         showToolbar={false}
                         url={address.backend}
+                        mediaType="page"
                     />
                 </div>
                 <Select

packages/page-blocks/src/blocks/faq/admin-widget/index.tsx

@@ -184,6 +184,7 @@ export default function AdminWidget({
                             onChange={(state: any) => setDescription(state)}
                             showToolbar={false}
                             url={address.backend}
+                            mediaType="page"
                         />
                     </div>
                 </Form>