fix: editor sync changes (#8306)

* chore: upate function declarations

* chore: formatted files

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

@@ -6,7 +6,8 @@ type Props = {
   onDismiss?: () => void;
 };
 
-export const ContentLimitBanner: React.FC<Props> = ({ className, onDismiss }) => (
+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",
@@ -33,3 +34,4 @@ export const ContentLimitBanner: React.FC<Props> = ({ className, onDismiss }) =>
       )}
     </div>
   );
+}

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

@@ -254,6 +254,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
             </div>
           </div>
         )}
+        <div>
           <div className="page-header-container group/page-header">
             <div className={blockWidthClassName}>
               <PageEditorHeaderRoot page={page} projectId={projectId} />
@@ -292,6 +293,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
             isFetchingFallbackBinary={isFetchingFallbackBinary}
           />
         </div>
+      </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,