Merge pull request #507 from components-ai/nested-component-selection

Improve nested component selection

Author: johno

.changeset/cyan-mails-admire.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Improve nested component selection

apps/docs/data/initial-html-editor-data.ts

@@ -1599,4 +1599,23 @@ export const initialComponents: any = [
       children: [{ type: 'slot', name: 'children', value: 'CSS.GUI' }],
     },
   },
+  {
+    type: 'component',
+    id: 'ddeeff',
+    tagName: 'Footer',
+    value: {
+      tagName: 'footer',
+      attributes: {},
+      style: {},
+      children: [
+        {
+          type: 'element',
+          tagName: 'h1',
+          attributes: {},
+          style: {},
+          children: [{ type: 'text', value: 'A footer!!!!' }],
+        },
+      ],
+    },
+  },
 ]

packages/gui/src/components/html/Component/Provider.tsx

@@ -1,11 +1,13 @@
 import { createContext, ReactNode, useContext } from 'react'
+import { useHtmlEditor } from '../Provider'
 import { ComponentData, ElementPath } from '../types'
 
 const DEFAULT_COMPONENT_VALUE = {}
 
 type ComponentProviderType = {
   value?: ComponentData
   path?: ElementPath
+  selectComponent?(e: MouseEvent): void
 }
 
 export function useComponent() {
@@ -28,8 +30,13 @@ export function ComponentProvider({
   path,
   children,
 }: ComponentProviderProps) {
+  const { setSelected } = useHtmlEditor()
+  const selectComponent = (e: MouseEvent) => {
+    setSelected(path)
+    e.stopPropagation()
+  }
   return (
-    <ComponentContext.Provider value={{ value, path }}>
+    <ComponentContext.Provider value={{ value, path, selectComponent }}>
       {children}
     </ComponentContext.Provider>
   )

packages/gui/src/components/html/Renderer/Element.tsx

@@ -11,7 +11,12 @@ export function ElementRenderer({
   path,
   ...canvasElementProps
 }: CanvasElementProps) {
-  const props = useCanvasProps({ value, path, ...canvasElementProps })
+  const { selectComponent } = useComponent()
+  const { onClick, ...props } = useCanvasProps({
+    value,
+    path,
+    ...canvasElementProps,
+  })
 
   if (value.type === 'slot') {
     return <SlotRenderer value={value} path={path} />
@@ -21,12 +26,20 @@ export function ElementRenderer({
 
   const Tag: any = value.tagName || 'div'
 
+  const handleClick = (e: MouseEvent) => {
+    if (selectComponent) {
+      return selectComponent(e)
+    }
+
+    onClick(e)
+  }
+
   if (isVoidElement(Tag)) {
-    return <Tag {...props} />
+    return <Tag {...props} onClick={handleClick} />
   }
 
   return (
-    <Tag {...props}>
+    <Tag {...props} onClick={handleClick}>
       <ChildrenRenderer value={value.children} path={path} />
     </Tag>
   )
@@ -56,15 +69,14 @@ interface ComponentRendererProps {
   path: ElementPath
 }
 export function ComponentRenderer({ value, path }: ComponentRendererProps) {
-  const { onClick } = useCanvasProps({ value, path })
   const fullValue = {
     ...value.value,
     attributes: mergeComponentAttributes(value),
   }
 
   return (
     <ComponentProvider value={value} path={path}>
-      <ElementRenderer value={fullValue} path={path} onClick={onClick} />
+      <ElementRenderer value={fullValue} path={path} />
     </ComponentProvider>
   )
 }