Merge branch 'main' of github.com:codelitdev/courselit into issue-793-2

Author: Rajat

apps/docs-new/content/docs/courses/meta.json

@@ -5,6 +5,7 @@
         "introduction",
         "create",
         "publish",
+        "preview",
         "set-a-price-for-product",
         "visibility",
         "add-content",

apps/docs-new/content/docs/courses/preview.mdx

@@ -0,0 +1,46 @@
+---
+title: Preview a course
+description: Preview a course before learners see it
+---
+
+Course preview lets course managers open the learner-facing course viewer without enrolling in the course. Use it to review the course experience before publishing, while editing unpublished lessons, or while checking drip schedules and section order.
+
+Preview mode is different from making a lesson available as a free preview. Lesson preview controls what learners can see before enrolling. Course preview is a private review mode for course managers.
+
+## Who can preview a course?
+
+Users who can manage the course can preview it. This includes school admins with permission to manage any course, and course creators who have course management permission.
+
+## What happens in preview mode?
+
+When you preview a course:
+
+- All course content appears unlocked.
+- Unpublished lessons are visible.
+- Dripped sections and lessons are visible without waiting for the drip schedule.
+- A preview badge appears in the course viewer.
+- Lesson completion and learner progress are not recorded.
+- The exit button returns you to the product dashboard you opened the preview from.
+
+## Steps to preview a course
+
+1. From the `Products` section in the dashboard, select your course to open its product dashboard.
+
+2. Open the `Actions` menu.
+
+3. Click `Preview`.
+
+    ![Preview course menu](/assets/courses/preview.png)
+
+4. Review the course in the course viewer.
+
+    ![Preview course](/assets/courses/course-preview.png)
+
+5. Click the exit button when you are done. You will return to the course product dashboard.
+
+## Notes
+
+- Preview mode does not publish your course or lessons.
+- Preview mode does not enroll you in the course.
+- Preview mode does not change customer reports, progress, or completion data.
+- Quiz submissions and previewing SCORM content are not supported in preview mode.

apps/docs-new/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/docs-new/public/assets/courses/course-preview.png

@@ -54,6 +54,7 @@ export const SIDEBAR: Sidebar = {
             { text: "Introduction", link: "en/courses/introduction" },
             { text: "Create a course", link: "en/courses/create" },
             { text: "Publish", link: "en/courses/publish" },
+            { text: "Preview a course", link: "en/courses/preview" },
             { text: "Set a price", link: "en/courses/set-a-price-for-product" },
             { text: "Control visibility", link: "en/courses/visibility" },
             { text: "Add content", link: "en/courses/add-content" },

apps/docs-new/public/assets/courses/preview.png

@@ -0,0 +1,51 @@
+---
+title: Preview a course
+description: Preview a course before learners see it
+layout: ../../../layouts/MainLayout.astro
+---
+
+Course preview lets course managers open the learner-facing course viewer without enrolling in the course. Use it to review the course experience before publishing, while editing unpublished lessons, or while checking drip schedules and section order.
+
+Preview mode is different from making a lesson available as a free preview. Lesson preview controls what learners can see before enrolling. Course preview is a private review mode for course managers.
+
+## Who can preview a course?
+
+Users who can manage the course can preview it. This includes school admins with permission to manage any course, and course creators who have course management permission.
+
+## What happens in preview mode?
+
+When you preview a course:
+
+- All course content appears unlocked.
+- Unpublished lessons are visible.
+- Dripped sections and lessons are visible without waiting for the drip schedule.
+- A preview badge appears in the course viewer.
+- Lesson completion and learner progress are not recorded.
+- The exit button returns you to the product dashboard you opened the preview from.
+
+## Steps to preview a course
+
+1. From the `Products` section in the dashboard, select your course to open its product dashboard.
+
+2. Open the `Actions` menu.
+
+3. Click `Preview`.
+
+    ![Preview course menu](/assets/courses/preview.png)
+
+4. Review the course in the course viewer.
+
+    ![Preview course](/assets/courses/course-preview.png)
+
+5. Click the exit button when you are done. You will return to the course product dashboard.
+
+## Notes
+
+- Preview mode does not publish your course or lessons.
+- Preview mode does not enroll you in the course.
+- Preview mode does not change customer reports, progress, or completion data.
+- Quiz submissions and previewing SCORM content are not supported in preview mode.
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/public/assets/courses/course-preview.png

@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+
+import { TextRenderer } from "../../../../../packages/page-blocks/src/components/text-renderer";
+
+jest.mock("@courselit/text-editor", () => ({
+    createExtensions: jest.fn(() => []),
+    createId: jest.fn((text: string) =>
+        text.toLowerCase().replace(/\s+/g, "-"),
+    ),
+    emptyDoc: { type: "doc", content: [] },
+    extractTextFromNode: jest.fn((node) =>
+        node?.content?.map((child) => child.text ?? "").join(""),
+    ),
+}));
+
+jest.mock("@tiptap/static-renderer", () => ({
+    renderToReactElement: jest.fn(({ content }) => {
+        const hasEmptyTextNode = (node: any): boolean => {
+            if (node?.type === "text" && node.text === "") {
+                return true;
+            }
+
+            return Array.isArray(node?.content)
+                ? node.content.some(hasEmptyTextNode)
+                : false;
+        };
+
+        if (hasEmptyTextNode(content)) {
+            throw new RangeError("Empty text nodes are not allowed");
+        }
+
+        return <p>{content.content[0].content[0].text}</p>;
+    }),
+}));
+
+describe("TextRenderer", () => {
+    it("renders content with empty text nodes", () => {
+        expect(() =>
+            render(
+                <TextRenderer
+                    json={
+                        {
+                            type: "doc",
+                            content: [
+                                {
+                                    type: "paragraph",
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: "Post body",
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: "paragraph",
+                                    content: [
+                                        {
+                                            type: "text",
+                                            text: "",
+                                        },
+                                    ],
+                                },
+                            ],
+                        } as any
+                    }
+                />,
+            ),
+        ).not.toThrow();
+
+        expect(screen.getByText("Post body")).toBeInTheDocument();
+    });
+});