From 0a617eec267b7bf5ee6ba0a65c9d3a9474b40dd3 Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Tue, 26 Dec 2023 16:45:00 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix:=20Pages=20mutation=20on=20c?=
 =?UTF-8?q?omponent=20mount=20(#3230)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔧 chore: Update revalidate option and add useEffect hook in PageDetailsPage component

- Set the `revalidate` option to `false` in the `commonSwrOptions` object.
- Add an `useEffect` hook that calls the `mutatePageDetails` function with specific options.
- Inside the `useEffect` hook, set `revalidate` to `true`, `populateCache` to `true`, and define a rollback function for error handling.
- If an error occurs during the rollback, display an error alert message using the `actionCompleteAlert` function.
- In the `updatePage` function, ensure that `workspaceSlug`, `projectId`, and `pageId` are all defined before proceeding.

* ♻️ refactor: Update code styling for inline code in CoreEditorExtensions

In the `packages/editor/core/src/ui/extensions/index.tsx` file, the code for inline code styling in the CoreEditorExtensions component has been updated. Previously, it was set to `false`, but now it is defined as an object with specific HTML attributes. The code styling includes a rounded-md background, custom primary color, margin, padding, font styling, and disabling spellcheck. This change improves the visual appearance and readability of inline code elements in the editor.
---
 .../editor/core/src/ui/extensions/index.tsx    | 12 ++++++------
 .../projects/[projectId]/pages/[pageId].tsx    | 18 +++++++++++++++++-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
index 1406cde67..4ae55f00c 100644
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -52,12 +52,12 @@ export const CoreEditorExtensions = (
         class: "leading-normal -mb-2",
       },
     },
-    // blockquote: {
-    //   HTMLAttributes: {
-    //     class: "border-l-4 border-custom-border-300",
-    //   },
-    // },
-    code: false,
+    code: {
+      HTMLAttributes: {
+        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        spellcheck: "false",
+      },
+    },
     codeBlock: false,
     horizontalRule: false,
     dropcursor: {
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 067d3e18f..f91be2c2d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -177,7 +177,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     onErrorAction: () => void
   ) => {
     const commonSwrOptions: MutatorOptions = {
-      revalidate: true,
+      revalidate: false,
       populateCache: false,
       rollbackOnError: () => {
         onErrorAction();
@@ -201,6 +201,22 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     });
   };
 
+  useEffect(() => {
+    mutatePageDetails(undefined, {
+      revalidate: true,
+      populateCache: true,
+      rollbackOnError: () => {
+        actionCompleteAlert({
+          title: `Page could not be updated`,
+          message: `Sorry, page could not be updated, please try again later`,
+          type: "error",
+        });
+        return true;
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const updatePage = async (formData: IPage) => {
     if (!workspaceSlug || !projectId || !pageId) return;