fix: editor sync changes (#8306)

* chore: upate function declarations

* chore: formatted files

apps/web/core/components/pages/editor/content-limit-banner.tsx

@@ -6,30 +6,32 @@ type Props = {
   onDismiss?: () => void;
 };
 
-export const ContentLimitBanner: React.FC<Props> = ({ className, onDismiss }) => (
-  <div
-    className={cn(
-      "flex items-center gap-2 bg-custom-background-80 border-b border-custom-border-200 px-4 py-2.5 text-sm",
-      className
-    )}
-  >
-    <div className="flex items-center gap-2 text-custom-text-200 mx-auto">
-      <span className="text-amber-500">
-        <TriangleAlert />
-      </span>
-      <span className="font-medium">
-        Content limit reached and live sync is off. Create a new page or use nested pages to continue syncing.
-      </span>
+export function ContentLimitBanner({ className, onDismiss }: Props) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 bg-custom-background-80 border-b border-custom-border-200 px-4 py-2.5 text-sm",
+        className
+      )}
+    >
+      <div className="flex items-center gap-2 text-custom-text-200 mx-auto">
+        <span className="text-amber-500">
+          <TriangleAlert />
+        </span>
+        <span className="font-medium">
+          Content limit reached and live sync is off. Create a new page or use nested pages to continue syncing.
+        </span>
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="ml-auto text-custom-text-300 hover:text-custom-text-200"
+          aria-label="Dismiss content limit warning"
+        >
+          ✕
+        </button>
+      )}
     </div>
-    {onDismiss && (
-      <button
-        type="button"
-        onClick={onDismiss}
-        className="ml-auto text-custom-text-300 hover:text-custom-text-200"
-        aria-label="Dismiss content limit warning"
-      >
-        ✕
-      </button>
-    )}
-  </div>
-);
+  );
+}

apps/web/core/components/pages/editor/editor-body.tsx

@@ -254,43 +254,45 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
             </div>
           </div>
         )}
-        <div className="page-header-container group/page-header">
-          <div className={blockWidthClassName}>
-            <PageEditorHeaderRoot page={page} projectId={projectId} />
+        <div>
+          <div className="page-header-container group/page-header">
+            <div className={blockWidthClassName}>
+              <PageEditorHeaderRoot page={page} projectId={projectId} />
+            </div>
           </div>
+          <CollaborativeDocumentEditorWithRef
+            editable={isContentEditable}
+            id={pageId}
+            fileHandler={config.fileHandler}
+            handleEditorReady={handleEditorReady}
+            ref={editorForwardRef}
+            titleRef={titleEditorRef}
+            containerClassName="h-full p-0 pb-64"
+            displayConfig={displayConfig}
+            getEditorMetaData={getEditorMetaData}
+            mentionHandler={{
+              searchCallback: async (query) => {
+                const res = await fetchMentions(query);
+                if (!res) throw new Error("Failed in fetching mentions");
+                return res;
+              },
+              renderComponent: (props) => <EditorMentionsRoot {...props} />,
+              getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
+            }}
+            updatePageProperties={updatePageProperties}
+            realtimeConfig={realtimeConfig}
+            serverHandler={serverHandler}
+            user={userConfig}
+            disabledExtensions={documentEditorExtensions.disabled}
+            flaggedExtensions={documentEditorExtensions.flagged}
+            aiHandler={{
+              menu: getAIMenu,
+            }}
+            onAssetChange={updateAssetsList}
+            extendedEditorProps={extendedEditorProps}
+            isFetchingFallbackBinary={isFetchingFallbackBinary}
+          />
         </div>
-        <CollaborativeDocumentEditorWithRef
-          editable={isContentEditable}
-          id={pageId}
-          fileHandler={config.fileHandler}
-          handleEditorReady={handleEditorReady}
-          ref={editorForwardRef}
-          titleRef={titleEditorRef}
-          containerClassName="h-full p-0 pb-64"
-          displayConfig={displayConfig}
-          getEditorMetaData={getEditorMetaData}
-          mentionHandler={{
-            searchCallback: async (query) => {
-              const res = await fetchMentions(query);
-              if (!res) throw new Error("Failed in fetching mentions");
-              return res;
-            },
-            renderComponent: (props) => <EditorMentionsRoot {...props} />,
-            getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
-          }}
-          updatePageProperties={updatePageProperties}
-          realtimeConfig={realtimeConfig}
-          serverHandler={serverHandler}
-          user={userConfig}
-          disabledExtensions={documentEditorExtensions.disabled}
-          flaggedExtensions={documentEditorExtensions.flagged}
-          aiHandler={{
-            menu: getAIMenu,
-          }}
-          onAssetChange={updateAssetsList}
-          extendedEditorProps={extendedEditorProps}
-          isFetchingFallbackBinary={isFetchingFallbackBinary}
-        />
       </div>
     </Row>
   );

apps/web/core/components/pages/editor/page-root.tsx

@@ -43,7 +43,7 @@ type TPageRootProps = {
   customRealtimeEventHandlers?: TCustomEventHandlers;
 };
 
-export const PageRoot = observer((props: TPageRootProps) => {
+export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
   const {
     config,
     handlers,

apps/web/core/components/pages/header/syncing-badge.tsx

@@ -6,7 +6,7 @@ type Props = {
   syncStatus: "syncing" | "synced" | "error";
 };
 
-export const PageSyncingBadge = ({ syncStatus }: Props) => {
+export function PageSyncingBadge({ syncStatus }: Props) {
   const [prevSyncStatus, setPrevSyncStatus] = useState<"syncing" | "synced" | "error" | null>(null);
   const [isVisible, setIsVisible] = useState(syncStatus !== "synced");
 
@@ -69,4 +69,4 @@ export const PageSyncingBadge = ({ syncStatus }: Props) => {
       </div>
     </Tooltip>
   );
-};
+}