migrated to tiptap

Author: Rajat Saxena

apps/web/app/layout.tsx

@@ -1,7 +1,7 @@
-import "remirror/styles/all.css";
 import "@courselit/page-blocks/styles.css";
 import "@courselit/components-library/styles.css";
 import "@courselit/page-primitives/styles.css";
+import "@courselit/text-editor/styles.css";
 import "../styles/globals.css";
 import type { Metadata } from "next";
 import { headers } from "next/headers";

apps/web/components/admin/page-editor/index.tsx

@@ -125,6 +125,10 @@ export default function PageEditor({
 
     const fontString = generateFontString(draftTypefaces);
 
+    const fetcher = new FetchBuilder()
+        .setUrl(`${address.backend}/api/graph`)
+        .setIsGraphQLEndpoint(true);
+
     useEffect(() => {
         loadDraftTypefaces();
         loadPage();
@@ -144,11 +148,7 @@ export default function PageEditor({
                     }
                 }
             `;
-        const fetch = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
-            .setPayload(query)
-            .setIsGraphQLEndpoint(true)
-            .build();
+        const fetch = fetcher.setPayload(query).build();
         try {
             setLoadingPages(true);
             const response = await fetch.exec();
@@ -292,11 +292,7 @@ export default function PageEditor({
             }
         }
         `;
-        const fetch = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
-            .setPayload(query)
-            .setIsGraphQLEndpoint(true)
-            .build();
+        const fetch = fetcher.setPayload(query).build();
         try {
             setLoading(true);
             const response = await fetch.exec();
@@ -328,11 +324,7 @@ export default function PageEditor({
         refreshLayout?: boolean;
         variables?: Record<string, unknown>;
     }) => {
-        const fetch = new FetchBuilder()
-            .setUrl(`${address.backend}/api/graph`)
-            .setPayload({ query, variables })
-            .setIsGraphQLEndpoint(true)
-            .build();
+        const fetch = fetcher.setPayload({ query, variables }).build();
         try {
             setLoading(true);
             const response = await fetch.exec();
@@ -468,13 +460,43 @@ export default function PageEditor({
     };
 
     const deleteWidget = async (widgetId: string) => {
-        const widgetIndex = layout.findIndex(
-            (widget) => widget.widgetId === widgetId,
-        );
-        layout.splice(widgetIndex, 1);
-        setLayout(layout);
-        onClose();
-        await savePage({ pageId: page.pageId!, layout });
+        // const widgetIndex = layout.findIndex(
+        //     (widget) => widget.widgetId === widgetId,
+        // );
+        // layout.splice(widgetIndex, 1);
+        // setLayout(layout);
+        // onClose();
+        // await savePage({ pageId: page.pageId!, layout });
+        const mutation = `
+            mutation ($pageId: String!, $blockId: String!) {
+                page: deleteBlock(pageId: $pageId, blockId: $blockId) {
+                    pageId,
+                    draftLayout,
+                }
+            }
+        `;
+        try {
+            const fetch = fetcher
+                .setPayload({
+                    query: mutation,
+                    variables: { pageId: page.pageId!, blockId: widgetId },
+                })
+                .build();
+            const response = await fetch.exec();
+            if (response.page) {
+                // setPage(response.page);
+                setLayout(response.page.draftLayout);
+                onClose();
+            }
+        } catch (err: any) {
+            toast({
+                title: TOAST_TITLE_ERROR,
+                description: err.message,
+                variant: "destructive",
+            });
+        } finally {
+            setLoading(false);
+        }
     };
 
     const addWidget = async (name: string) => {

apps/web/graphql/pages/logic.ts

@@ -424,3 +424,39 @@ export const deletePage = async (
 
     return true;
 };
+
+export const deleteBlock = async ({
+    context: ctx,
+    pageId,
+    blockId,
+}: {
+    context: GQLContext;
+    pageId: string;
+    blockId: string;
+}) => {
+    checkIfAuthenticated(ctx);
+    if (!checkPermission(ctx.user.permissions, [permissions.manageSite])) {
+        throw new Error(responses.action_not_allowed);
+    }
+    const page: Page | null = await PageModel.findOne({
+        pageId,
+        domain: ctx.subdomain._id,
+    });
+
+    if (!page) {
+        return null;
+    }
+
+    const block = page.draftLayout.find(
+        (block: any) => block.widgetId === blockId,
+    );
+    if (!block) {
+        return null;
+    }
+
+    page.draftLayout = page.draftLayout.filter(
+        (block: any) => block.widgetId !== blockId,
+    );
+    await (page as any).save();
+    return getPageResponse(page!, ctx);
+};

apps/web/graphql/pages/mutation.ts

@@ -1,6 +1,12 @@
 import { GraphQLBoolean, GraphQLNonNull, GraphQLString } from "graphql";
 import GQLContext from "../../models/GQLContext";
-import { updatePage, createPage, deletePage, publish } from "./logic";
+import {
+    updatePage,
+    createPage,
+    deletePage,
+    publish,
+    deleteBlock,
+} from "./logic";
 import types from "./types";
 import constants from "../../config/constants";
 const { defaultPages } = constants;
@@ -89,6 +95,18 @@ const mutations = {
             context: GQLContext,
         ) => deletePage(context, id),
     },
+    deleteBlock: {
+        type: types.page,
+        args: {
+            pageId: { type: new GraphQLNonNull(GraphQLString) },
+            blockId: { type: new GraphQLNonNull(GraphQLString) },
+        },
+        resolve: async (
+            _: any,
+            { pageId, blockId }: { pageId: string; blockId: string },
+            context: GQLContext,
+        ) => deleteBlock({ context, pageId, blockId }),
+    },
 };
 
 export default mutations;