[Dashboards] Auto focus effect on standalone widget (#17623)

closes
https://discord.com/channels/1130383047699738754/1467809255771078719

before - 



https://github.com/user-attachments/assets/3af6dbfd-358c-44fd-9419-338791fd5cfc


after - 



https://github.com/user-attachments/assets/2e8f89f8-5989-4e62-9bc0-6ddd47c0d421

packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts

@@ -1,6 +1,8 @@
 import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 
@@ -24,6 +26,7 @@ export const useEditPageLayoutWidget = (pageLayoutIdFromProps?: string) => {
 
   const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
   const { closeCommandMenu } = useCommandMenu();
+  const setCommandMenuPage = useSetRecoilState(commandMenuPageState);
 
   const handleEditWidget = useCallback(
     ({
@@ -53,12 +56,14 @@ export const useEditPageLayoutWidget = (pageLayoutIdFromProps?: string) => {
         return;
       }
 
+      setCommandMenuPage(CommandMenuPages.Root);
       closeCommandMenu();
     },
     [
       setPageLayoutEditingWidgetId,
       navigatePageLayoutCommandMenu,
       closeCommandMenu,
+      setCommandMenuPage,
     ],
   );
 

packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidget.tsx

@@ -11,6 +11,7 @@ import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPag
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { DashboardsBlockEditor } from '@/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor';
+import { StandaloneRichTextWidgetAutoFocusEffect } from '@/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidgetAutoFocusEffect';
 import { BLOCK_EDITOR_GLOBAL_HOTKEYS_CONFIG } from '@/ui/input/editor/constants/BlockEditorGlobalHotkeysConfig';
 import { useAttachmentSync } from '@/ui/input/editor/hooks/useAttachmentSync';
 import { parseInitialBlocknote } from '@/ui/input/editor/utils/parseInitialBlocknote';
@@ -182,6 +183,11 @@ export const StandaloneRichTextWidget = ({
       ref={containerElementRef}
       isPageLayoutInEditMode={isPageLayoutInEditMode}
     >
+      <StandaloneRichTextWidgetAutoFocusEffect
+        shouldFocus={isEditable}
+        editor={editor}
+        containerElement={containerElementRef.current}
+      />
       <ScrollWrapper
         componentInstanceId={`scroll-wrapper-rich-text-widget-${widget.id}`}
       >

packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidgetAutoFocusEffect.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+
+import { type BLOCK_SCHEMA } from '@/activities/blocks/constants/Schema';
+
+type StandaloneRichTextWidgetAutoFocusEffectProps = {
+  shouldFocus: boolean;
+  editor: typeof BLOCK_SCHEMA.BlockNoteEditor;
+  containerElement?: HTMLElement | null;
+};
+
+export const StandaloneRichTextWidgetAutoFocusEffect = ({
+  shouldFocus,
+  editor,
+  containerElement,
+}: StandaloneRichTextWidgetAutoFocusEffectProps) => {
+  useEffect(() => {
+    if (shouldFocus) {
+      const alreadyFocused =
+        containerElement?.contains(document.activeElement) ?? false;
+
+      if (!alreadyFocused) {
+        const rafId = requestAnimationFrame(() => {
+          editor.focus();
+        });
+
+        return () => {
+          cancelAnimationFrame(rafId);
+        };
+      }
+    }
+  }, [shouldFocus, editor, containerElement]);
+
+  return null;
+};