Merge pull request #596 from components-ai/text-styles

Apply styles to text parent

Author: johno

.changeset/pretty-comics-rush.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Apply styles to text parent

packages/gui/src/components/html/Editor.tsx

@@ -8,6 +8,7 @@ import { useTheme } from '../providers/ThemeContext'
 import { NodeEditor } from './Editors/NodeEditor'
 import { TreeNode } from './TreeNode'
 import { Import } from './Import'
+import { isText } from '../../lib/codegen/util'
 
 const TABS_TRIGGER_STYLES: any = {
   all: 'unset',
@@ -61,6 +62,13 @@ export function HtmlEditor() {
   const selected = providedSelected || []
   const nodeValue = getChildAtPath(value, selected)
 
+  let nodeForStyleEditor = nodeValue
+  const stylePath = [...selected]
+  if (isText(nodeValue)) {
+    stylePath.pop()
+    nodeForStyleEditor = getChildAtPath(value, stylePath)
+  }
+
   return (
     <div
       sx={{
@@ -112,10 +120,10 @@ export function HtmlEditor() {
             <Editor
               key={selected.join('-')}
               theme={theme}
-              styles={nodeValue.style ?? {}}
+              styles={nodeForStyleEditor.style ?? {}}
               onChange={(newStyles) => {
-                const newItem = { ...nodeValue, style: newStyles }
-                onChange(setChildAtPath(value, selected, newItem))
+                const newItem = { ...nodeForStyleEditor, style: newStyles }
+                onChange(setChildAtPath(value, stylePath, newItem))
               }}
               showRegenerate
               showAddProperties

packages/gui/src/components/html/util.ts

@@ -45,6 +45,15 @@ export function getChildAtPath(element: HtmlNode, path: ElementPath): HtmlNode {
   return getChildAtPath(child, rest)
 }
 
+export function getParentAtPath(
+  element: HtmlNode,
+  path: ElementPath
+): HtmlNode {
+  const newPath = [...path]
+  newPath.pop()
+  return getChildAtPath(element, newPath)
+}
+
 export function addChildAtPath(
   element: HtmlNode,
   path: ElementPath,