Code mirror compatibility extension for tiptap

Author: Rajat

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

@@ -3,6 +3,7 @@
 import { TextRenderer } from "@courselit/page-blocks";
 import { ThemeStyle } from "@courselit/page-models";
 import { TableOfContent } from "@components/table-of-content";
+import WidgetErrorBoundary from "@components/public/base-layout/template/widget-error-boundary";
 
 export default function ClientSideTextRenderer({
     json,
@@ -14,7 +15,9 @@ export default function ClientSideTextRenderer({
     return (
         <div className="flex flex-col gap-4">
             <TableOfContent json={json} theme={theme} />
-            <TextRenderer json={json} theme={theme} />
+            <WidgetErrorBoundary widgetName="text-editor">
+                <TextRenderer json={json} theme={theme} />
+            </WidgetErrorBoundary>
         </div>
     );
 }

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

@@ -28,6 +28,7 @@ import { getProduct } from "./helpers";
 import { getUserProfile } from "@/app/(with-contexts)/helpers";
 import { BadgeCheck } from "lucide-react";
 import { emptyDoc as TextEditorEmptyDoc } from "@courselit/text-editor";
+import WidgetErrorBoundary from "@components/public/base-layout/template/widget-error-boundary";
 const { permissions } = UIConstants;
 
 export default function ProductPage(props: {
@@ -130,7 +131,12 @@ export default function ProductPage(props: {
                         json={descriptionJson}
                         theme={theme.theme}
                     />
-                    <TextRenderer json={descriptionJson} theme={theme.theme} />
+                    <WidgetErrorBoundary widgetName="text-editor">
+                        <TextRenderer
+                            json={descriptionJson}
+                            theme={theme.theme}
+                        />
+                    </WidgetErrorBoundary>
                 </div>
             </div>
             {isEnrolled(product.courseId, profile as Profile) && (

apps/web/components/community/banner.tsx

@@ -9,6 +9,7 @@ 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";
+import WidgetErrorBoundary from "@components/public/base-layout/template/widget-error-boundary";
 
 interface BannerComponentProps {
     canEdit: boolean;
@@ -78,14 +79,16 @@ export default function Banner({
                     <>
                         <AlertDescription>
                             {isTextEditorNonEmpty(bannerText) ? (
-                                <TextRenderer
-                                    json={
-                                        bannerText as unknown as Record<
-                                            string,
-                                            unknown
-                                        >
-                                    }
-                                />
+                                <WidgetErrorBoundary widgetName="text-editor">
+                                    <TextRenderer
+                                        json={
+                                            bannerText as unknown as Record<
+                                                string,
+                                                unknown
+                                            >
+                                        }
+                                    />
+                                </WidgetErrorBoundary>
                             ) : (
                                 canEdit && (
                                     <div className="flex items-center space-x-2 text-muted-foreground">

apps/web/components/community/info.tsx

@@ -34,6 +34,7 @@ import {
 } from "@components/ui/dialog";
 import { COMMUNITY_SETTINGS, TOAST_TITLE_SUCCESS } from "@ui-config/strings";
 import { Share2 } from "lucide-react";
+import WidgetErrorBoundary from "@components/public/base-layout/template/widget-error-boundary";
 const { permissions } = UIConstants;
 
 interface CommunityInfoProps {
@@ -124,10 +125,12 @@ export function CommunityInfo({
                 <div className="space-y-2">
                     <div className="text-sm text-muted-foreground">
                         {description && (
-                            <TextRenderer
-                                json={description}
-                                theme={theme.theme}
-                            />
+                            <WidgetErrorBoundary widgetName="text-editor">
+                                <TextRenderer
+                                    json={description}
+                                    theme={theme.theme}
+                                />
+                            </WidgetErrorBoundary>
                         )}
                     </div>
                     <p className="text-sm">

apps/web/components/public/lesson-viewer/index.tsx

@@ -38,6 +38,7 @@ import { isEnrolled } from "../../../ui-lib/utils";
 import LessonEmbedViewer from "./embed-viewer";
 import QuizViewer from "./quiz-viewer";
 import { getUserProfile } from "@/app/(with-contexts)/helpers";
+import WidgetErrorBoundary from "../base-layout/template/widget-error-boundary";
 
 interface CaptionProps {
     text: string;
@@ -299,14 +300,16 @@ export const LessonViewer = ({
                         {String.prototype.toUpperCase.call(LESSON_TYPE_TEXT) ===
                             lesson.type &&
                             lesson.content && (
-                                <TextRenderer
-                                    json={
-                                        lesson.content as unknown as Record<
-                                            string,
-                                            unknown
-                                        >
-                                    }
-                                />
+                                <WidgetErrorBoundary widgetName="text-editor">
+                                    <TextRenderer
+                                        json={
+                                            lesson.content as unknown as Record<
+                                                string,
+                                                unknown
+                                            >
+                                        }
+                                    />
+                                </WidgetErrorBoundary>
                             )}
                         {String.prototype.toUpperCase.call(
                             LESSON_TYPE_EMBED,

packages/text-editor/src/components/custom-code-mirror.tsx

@@ -0,0 +1,27 @@
+// This is only to maintain backward compatibility for codeMirror node type
+
+import { Node } from "@tiptap/core";
+
+export const CodeMirrorNode = Node.create({
+    name: "codeMirror",
+    content: "block+",
+    code: true,
+
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: "pre",
+            },
+        ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ["pre", HTMLAttributes, 0];
+    },
+});

packages/text-editor/src/extensions.ts

@@ -21,6 +21,7 @@ import css from "highlight.js/lib/languages/css";
 import xml from "highlight.js/lib/languages/xml";
 import type { Extensions } from "@tiptap/core";
 import { createId } from "./create-id";
+import { CodeMirrorNode } from "./components/custom-code-mirror";
 
 lowlight.registerLanguage("javascript", javascript);
 lowlight.registerLanguage("typescript", typescript);
@@ -92,4 +93,5 @@ export const createExtensions = ({
         },
     }),
     Highlight,
+    CodeMirrorNode,
 ];