🔧 fix: Pages mutation on component mount (#3230)

* 🔧 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.

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: {

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;