Added error handler to text editor; added highlight extension;

Author: Rajat

apps/docs/public/assets/pages/courselit-text-editor-create-links.gif

@@ -6,7 +6,7 @@ layout: ../../../layouts/MainLayout.astro
 
 Every page in CourseLit is made up of various blocks, stacked in a top-to-bottom fashion. Each block serves a unique purpose and can be customized.
 
-The following screenshot shows [Header](/en/pages/header), [Rich Text](/en/pages/banner), [Hero](/en/pages/content), and [Grid](/en/pages/grid) blocks (top to bottom) in action. Different blocks are highlighted in different colors.
+The following screenshot shows [Header](/en/website/blocks#header), [Rich Text](/en/website/blocks#rich-text), [Hero](/en/website/blocks#hero), and [Grid](/en/website/blocks#grid) blocks (top to bottom) in action. Different blocks are highlighted in different colors.
 
 ![CourseLit page blocks](/assets/pages/page-builder-blocks.png)
 
@@ -36,32 +36,40 @@ You will also see the newly added link on the header itself.
 3. Click on the pencil icon against the newly added link to edit it as shown above.
 4. Change the label (displayed as text on the header block) and the URL (where the user should be taken upon clicking the label on the header) and click `Done` to save.
    ![Header edit link](/assets/pages/header-edit-link.png)
-   </details>
+    </details>
 
 ### [Rich Text](#rich-text)
 
 <details>
 <summary>Expand to see Rich Text block details</summary>
 
-The rich text block can be used to add text blocks containing elements like hyperlinks, etc.
+The rich text block uses the same text editor available elsewhere on the platform. It supports all functionality that does not require a toolbar, as the toolbar is hidden in this block.
 
-#### Making text bold/italic/underline
+#### Keyboard shortcuts
 
 1. Select the text.
-2. To make the selected text bold, press <kbd>Ctrl+B</kbd>; to make it italic, press <kbd>Ctrl+I</kbd>; and for underline, press <kbd>Ctrl+U</kbd>.
-
-You can also use the floating controls to do the same as shown below.
+2. Use the following shortcuts to format it:
+
+- **Bold**: <kbd>Ctrl+B</kbd>
+- **Italic**: <kbd>Ctrl+I</kbd>
+- **Underline**: <kbd>Ctrl+U</kbd>
+- **Strikethrough**: <kbd>Ctrl+Shift+S</kbd>
+- **Undo**: <kbd>Ctrl+Z</kbd>
+- **Redo**: <kbd>Ctrl+Shift+Z</kbd>
+- **Paste**: <kbd>Ctrl+V</kbd>
+- **Ordered list**: <kbd>Ctrl+Shift+7</kbd>
+- **Bulleted list**: <kbd>Ctrl+Shift+8</kbd>
+- **Highlight**: <kbd>Ctrl+Shift+H</kbd> (or type `==two equal signs==`)
 
 ![Stylised text](/assets/pages/rich-text-styling.gif)
 
 #### Creating hyperlinks
 
 1. Select the text.
-    > Double-clicking the text to select won't work due to a bug. We are working on it.
-2. Click on the floating `link` button to reveal a popup text input.
-3. In the popup text input, enter the URL as shown below.
-   ![Create a hyperlink in rich text block](/assets/pages/rich-text-create-hyperlink.gif)
-   </details>
+2. Click on the floating `link` icon to reveal a text input.
+3. In the popup text input, enter the URL as shown below and press <kbd>Enter</kbd>.
+   ![Create a hyperlink in rich text block](/assets/pages/courselit-text-editor-create-links.gif)
+    </details>
 
 ### [Hero](#hero)
 
@@ -87,7 +95,7 @@ Following is how it looks on a page.
 4. In the button action, enter the URL the user should be taken to upon clicking.
    a. If the URL is from your own school, use its relative form, i.e., `/courses`.
    b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
-   </details>
+    </details>
 
 ### [Grid](#grid)
 
@@ -132,7 +140,7 @@ A grid block comes in handy when you want to show some sort of list, for example
 4. In the button action, enter the URL the user should be taken to upon clicking.
    a. If the URL is from your own school, use its relative form, i.e., `/courses`.
    b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
-   </details>
+    </details>
 
 ### [Featured](#featured)
 
@@ -268,7 +276,7 @@ In the `Design` panel, you can customize:
 - Maximum width
 - Vertical padding
 - Social media links (Facebook, Twitter, Instagram, LinkedIn, YouTube, Discord, GitHub)
-  </details>
+    </details>
 
 ## [Shared blocks](#shared-blocks)
 

apps/docs/src/pages/en/website/blocks.md

@@ -150,6 +150,13 @@ export default function Details({ id }: DetailsProps) {
                     onChange={(state: any) => setDescription(state)}
                     url={address.backend}
                     placeholder={TEXT_EDITOR_PLACEHOLDER}
+                    onError={(err: any) => {
+                        toast({
+                            title: TOAST_TITLE_ERROR,
+                            description: err,
+                            variant: "destructive",
+                        });
+                    }}
                 />
                 <div>
                     <Button type="submit" disabled={loading}>

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

@@ -72,13 +72,11 @@ export function TextRenderer({ json, className, theme }: TextRendererProps) {
                         </Header3>
                     );
                 },
-                codeMirror: ({ children }) => {
-                    return (
-                        <pre>
-                            <code>{children}</code>
-                        </pre>
-                    );
-                },
+                codeMirror: ({ children }) => (
+                    <pre>
+                        <code>{children}</code>
+                    </pre>
+                ),
             },
             markMapping: {
                 link: ({ mark, children, node }) => {
@@ -95,6 +93,11 @@ export function TextRenderer({ json, className, theme }: TextRendererProps) {
                         </Link>
                     );
                 },
+                highlight: ({ children }) => (
+                    <mark className="bg-accent text-accent-foreground">
+                        {children}
+                    </mark>
+                ),
             },
         },
     });

packages/page-blocks/src/components/text-renderer.tsx

@@ -26,22 +26,20 @@ import "@courselit/text-editor/styles.css";
 
 `Ctrl + u`: Underline
 
-`Ctrl + d`: Strikethrough
-
-`Ctrl + k`: Create/edit a link
+`Ctrl + Shift + s`: Strikethrough
 
 `Ctrl + z`: Undo
 
 `Ctrl + Z`: Redo
 
 `Ctrl + v`: Paste
 
-`Ctrl + Shift + 8`: Bulleted list
+`Ctrl + Shift + 7`: Ordered list
 
-`Ctrl + Shift + 9`: Ordered list
+`Ctrl + Shift + 8`: Bulleted list
 
-`Ctrl + Shift + 7`: Task list
+`Ctrl + Shift + H`: Highlight (or type `==two equal signs==` and it will be converted to highlight)
 
 ## Images
 
-Use the _Image_ button in the toolbar to upload assets to CourseLit. Uploads are limited to 2MB per file.
+Use the _Image_ button in the toolbar to upload assets to CourseLit. Uploads are limited to `2 Mega bytes` per file.

packages/text-editor/README.md

@@ -58,6 +58,7 @@
         "@tiptap/extension-dropcursor": "^3.0.0",
         "@tiptap/extension-gapcursor": "^3.0.0",
         "@tiptap/extension-heading": "^3.0.0",
+        "@tiptap/extension-highlight": "^3.11.0",
         "@tiptap/extension-image": "^3.0.0",
         "@tiptap/extension-link": "^3.0.0",
         "@tiptap/extension-placeholder": "^3.0.0",

packages/text-editor/package.json

@@ -28,6 +28,8 @@ export interface EditorProps {
     initialContent?: ReactEditorProps["initialContent"];
     placeholder?: string;
     autoFocus?: boolean;
+    imageSizeLimit?: number;
+    onError?: (...args: any[]) => void;
 }
 
 interface EditorType extends FC<PropsWithChildren<EditorProps>> {
@@ -46,6 +48,8 @@ const Editor: EditorType = Object.assign(
         refresh,
         url,
         autoFocus,
+        imageSizeLimit,
+        onError,
     }) => {
         const [isUploading, setIsUploading] = useState(false);
         const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -144,7 +148,12 @@ const Editor: EditorType = Object.assign(
             async (file: File) => {
                 try {
                     setIsUploading(true);
-                    const result = await uploadImageToMediaLit(url, file);
+                    const result = await uploadImageToMediaLit({
+                        url,
+                        file,
+                        fileSizeLimit: imageSizeLimit,
+                        onError,
+                    });
                     editor
                         ?.chain()
                         .focus()

packages/text-editor/src/editor.tsx

@@ -12,6 +12,7 @@ import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import Heading from "@tiptap/extension-heading";
+import Highlight from "@tiptap/extension-highlight";
 import { lowlight } from "lowlight";
 import javascript from "highlight.js/lib/languages/javascript";
 import typescript from "highlight.js/lib/languages/typescript";
@@ -58,6 +59,7 @@ export const createExtensions = ({
         },
         resize: {
             enabled: true,
+            directions: ["top", "bottom", "left", "right"],
             alwaysPreserveAspectRatio: true,
         },
     }),
@@ -89,4 +91,5 @@ export const createExtensions = ({
             ];
         },
     }),
+    Highlight,
 ];

packages/text-editor/src/extensions.ts

@@ -1,8 +1,6 @@
 import { FetchBuilder } from "@courselit/utils";
 import { Media } from "@courselit/common-models";
 
-type SetProgress = (progress: number) => void;
-
 async function getPresignedUrl(url: string) {
     const fetch = new FetchBuilder()
         .setUrl(`${url}/api/media/presigned`)
@@ -12,17 +10,29 @@ async function getPresignedUrl(url: string) {
 }
 
 export interface UploadedImage {
+    mediaId: string;
     src: string;
     fileName?: string;
 }
 
-export async function uploadImageToMediaLit(
-    url: string,
-    file: File,
-    progress?: SetProgress,
-): Promise<UploadedImage> {
-    if (file.size > 2097152) {
-        throw new Error("File is larger than 2MB");
+export async function uploadImageToMediaLit({
+    url,
+    file,
+    fileSizeLimit = 2097152, // 2 MB,
+    onError,
+}: {
+    url: string;
+    file: File;
+    fileSizeLimit?: number;
+    onError?: (args: any) => void;
+}): Promise<UploadedImage> {
+    if (file.size > fileSizeLimit) {
+        if (onError) {
+            onError("File is larger than 2MB");
+            return { src: "", mediaId: "", fileName: "" };
+        } else {
+            throw new Error("File is larger than 2MB");
+        }
     }
 
     const { signature, endpoint } = await getPresignedUrl(url);
@@ -40,14 +50,11 @@ export async function uploadImageToMediaLit(
         body: formData,
     });
 
-    if (progress) {
-        progress(1);
-    }
-
     const data: Media = await response.json();
 
     return {
         src: data.file,
         fileName: data.originalFileName,
+        mediaId: data.mediaId,
     };
 }