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>
   );
-};
+}

packages/editor/src/core/components/editors/document/collaborative-editor.tsx

@@ -15,7 +15,7 @@ import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
 import type { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
 
 // Inner component that has access to collaboration context
-const CollaborativeDocumentEditorInner: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
+function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorProps) {
   const {
     aiHandler,
     bubbleMenuEnabled = true,
@@ -129,10 +129,10 @@ const CollaborativeDocumentEditorInner: React.FC<ICollaborativeDocumentEditorPro
       </div>
     </>
   );
-};
+}
 
 // Outer component that provides collaboration context
-const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
+function CollaborativeDocumentEditor(props: ICollaborativeDocumentEditorProps) {
   const { id, realtimeConfig, serverHandler, user } = props;
 
   const token = useMemo(() => JSON.stringify(user), [user]);
@@ -147,13 +147,16 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
       <CollaborativeDocumentEditorInner {...props} />
     </CollaborationProvider>
   );
-};
+}
 
-const CollaborativeDocumentEditorWithRef = React.forwardRef<EditorRefApi, ICollaborativeDocumentEditorProps>(
-  (props, ref) => (
+const CollaborativeDocumentEditorWithRef = React.forwardRef(function CollaborativeDocumentEditorWithRef(
+  props: ICollaborativeDocumentEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return (
     <CollaborativeDocumentEditor key={props.id} {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi>} />
-  )
-);
+  );
+});
 
 CollaborativeDocumentEditorWithRef.displayName = "CollaborativeDocumentEditorWithRef";
 

packages/editor/src/core/components/editors/editor-container.tsx

@@ -26,7 +26,7 @@ type Props = {
   state?: TCollabValue["state"];
 };
 
-export const EditorContainer: FC<Props> = (props) => {
+export function EditorContainer(props: Props) {
   const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice, provider, state } = props;
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
@@ -176,4 +176,4 @@ export const EditorContainer: FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}

packages/editor/src/core/components/editors/editor-content.tsx

@@ -1,6 +1,6 @@
 import { EditorContent } from "@tiptap/react";
 import type { Editor } from "@tiptap/react";
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 type Props = {
   className?: string;
@@ -10,7 +10,7 @@ type Props = {
   tabIndex?: number;
 };
 
-export const EditorContentWrapper: FC<Props> = (props) => {
+export function EditorContentWrapper(props: Props) {
   const { editor, className, children, tabIndex, id } = props;
 
   return (
@@ -23,4 +23,4 @@ export const EditorContentWrapper: FC<Props> = (props) => {
       {children}
     </div>
   );
-};
+}

packages/editor/src/core/hooks/use-title-editor.ts

@@ -13,7 +13,7 @@ import { getEditorRefHelpers } from "@/helpers/editor-ref";
 import type { IEditorPropsExtended, IEditorProps } from "@/types";
 import type { EditorTitleRefApi, ICollaborativeDocumentEditorProps } from "@/types/editor";
 
-type Props = {
+type TUseTitleEditorProps = {
   editable?: boolean;
   provider: HocuspocusProvider;
   titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
@@ -31,7 +31,7 @@ type Props = {
  * A hook that creates a title editor with collaboration features
  * Uses the same Y.Doc as the main editor but a different field
  */
-export const useTitleEditor = (props: Props) => {
+export const useTitleEditor = (props: TUseTitleEditorProps) => {
   const {
     editable = true,
     id,