Created hook to focus on components

Author: jonathanalvares9009

packages/atri-app-core/src/canvasMachine.ts

@@ -215,7 +215,9 @@ type SubscribeStates =
   | typeof OUTSIDE_CANVAS
   | typeof COMPONENT_CREATED
   | "hover"
-  | "hoverEnd";
+  | "hoverEnd"
+  | "focus"
+  | "focusEnd";
 
 export function createCanvasMachine(id: string) {
   const subscribers: { [key in SubscribeStates]: Callback[] } = {
@@ -227,6 +229,8 @@ export function createCanvasMachine(id: string) {
     [COMPONENT_CREATED]: [],
     hover: [],
     hoverEnd: [],
+    focus: [],
+    focusEnd: [],
   };
   function subscribeCanvasMachine(state: SubscribeStates, cb: Callback) {
     subscribers[state].push(cb);

packages/atri-app-core/src/editor-components/NormalComponentRenderer/NormalComponentRenderer.tsx

@@ -1,6 +1,7 @@
 import { NormalComponentRendererProps } from "../../types";
 import { componentStoreApi } from "../../api";
 import { useAssignComponentId } from "../hooks/useAssignComponentId";
+import { useFocusComponent } from "../hooks/useFocusComponent";
 
 export function NormalComponentRenderer(props: NormalComponentRendererProps) {
   const {
@@ -10,5 +11,6 @@ export function NormalComponentRenderer(props: NormalComponentRendererProps) {
     callbacks,
   } = componentStoreApi.getComponent(props.id)!;
   useAssignComponentId({ id: props.id });
+  useFocusComponent({ id: props.id });
   return <Comp {...compProps} ref={ref} {...callbacks} />;
 }

packages/atri-app-core/src/editor-components/ParentComponentRenderer/ParentComponentRenderer.tsx

@@ -4,6 +4,7 @@ import { NormalComponentRenderer } from "../NormalComponentRenderer/NormalCompon
 import { useAssignParentMarker } from "../hooks/useAssignParentMaker";
 import { useAssignComponentId } from "../hooks/useAssignComponentId";
 import { useHandleNewChild } from "./hooks/useHandleNewChild";
+import { useFocusComponent } from "../hooks/useFocusComponent";
 
 export function ParentComponentRenderer(props: ParentComponentRendererProps) {
   const {
@@ -15,6 +16,7 @@ export function ParentComponentRenderer(props: ParentComponentRendererProps) {
   const { children } = useHandleNewChild(props);
   useAssignParentMarker({ id: props.id });
   useAssignComponentId({ id: props.id });
+  useFocusComponent({ id: props.id });
   return (
     <Comp {...compProps} ref={ref} {...callbacks}>
       {children.map((childId) => {

packages/atri-app-core/src/editor-components/hooks/useFocusComponent.ts

@@ -0,0 +1,13 @@
+import { DecoratorData } from "../../types";
+import { componentStoreApi } from "../../api/componentStoreApi";
+import { useEffect } from "react";
+
+export function useFocusComponent(props: DecoratorData) {
+  useEffect(() => {
+    const ref = componentStoreApi.getComponentRef(props.id);
+    if (ref.current) {
+      ref.current.tabIndex = 0;
+      ref.current.focus();
+    }
+  }, [props.id]);
+}