Use text node rather than string

.changeset/poor-ties-attack.md

@@ -0,0 +1,5 @@
+---
+"@compai/css-gui": patch
+---
+
+Use text node rather than string

apps/docs/pages/html-editor.tsx

@@ -48,7 +48,7 @@ const initialValue: any = {
           unit: 'number',
         },
       },
-      children: ['CSS.GUI'],
+      children: [{ type: 'text', value: 'CSS.GUI' }],
     },
     {
       tagName: 'h2',
@@ -72,7 +72,11 @@ const initialValue: any = {
         },
       },
       children: [
-        'Quickly build components with custom styling panels. No coding required.',
+        {
+          type: 'text',
+          value:
+            'Quickly build components with custom styling panels. No coding required.',
+        },
       ],
     },
     {
@@ -89,7 +93,10 @@ const initialValue: any = {
         },
       },
       children: [
-        'Click anywhere on the canvas to start. Go ahead. Click away.',
+        {
+          type: 'text',
+          value: 'Click anywhere on the canvas to start. Go ahead. Click away.',
+        },
       ],
     },
     {
@@ -140,7 +147,12 @@ const initialValue: any = {
         },
       },
       tagName: 'a',
-      children: ['Primary CTA'],
+      children: [
+        {
+          type: 'text',
+          value: 'Primary CTA',
+        },
+      ],
     },
     {
       attributes: { href: 'https://components.ai' },
@@ -182,7 +194,12 @@ const initialValue: any = {
         },
       },
       tagName: 'a',
-      children: ['Secondary link'],
+      children: [
+        {
+          type: 'text',
+          value: 'Secondary link',
+        },
+      ],
     },
   ],
 }

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

@@ -1,6 +1,10 @@
 import { debounce, uniq } from 'lodash-es'
 import { useEffect, useState } from 'react'
-import { buildFontFamiliesHref, buildVariableFontFamiliesHref } from '../inputs/FontFamily/FontTags'
+import {
+  buildFontFamiliesHref,
+  buildVariableFontFamiliesHref,
+} from '../inputs/FontFamily/FontTags'
+import { HtmlNode } from './types'
 
 export function getStyleFonts(style: any): string[] {
   if (!style) return []
@@ -28,7 +32,7 @@ export function getHTMLTreeFonts(root: any): string[] {
   }
 
   for (const node of root.children) {
-    if (typeof node === 'object') {
+    if (node.type !== 'text') {
       treeFonts = [...treeFonts, ...getHTMLTreeFonts(node)]
     }
   }
@@ -47,11 +51,11 @@ async function buildHrefs({
   style,
   setStaticHref,
   setVariableHref,
- }: BuildHrefProps) {
+}: BuildHrefProps) {
   const fonts = style ? getStyleFonts(style) : getHTMLTreeFonts(tree)
   const staticHref = await buildFontFamiliesHref(fonts)
   const variableHref = await buildVariableFontFamiliesHref(fonts)
-  
+
   setStaticHref(staticHref)
   setVariableHref(variableHref)
 }

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

@@ -52,8 +52,8 @@ function ElementRenderer({ value, path }: ElementRendererProps) {
     <span sx={{ cursor: 'default', a: { cursor: 'default' } }}>
       <Tag {...props}>
         {children.map((child, i) => {
-          if (typeof child === 'string') {
-            return child
+          if (child.type === 'text') {
+            return child.value
           }
           return <ElementRenderer key={i} value={child} path={[...path, i]} />
         })}

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

@@ -93,7 +93,7 @@ interface TagEditorProps extends EditorProps {
 }
 
 function NodeEditor({ value, onChange, onRemove }: TagEditorProps) {
-  const nodeType = typeof value === 'string' ? 'text' : 'tag'
+  const nodeType = value.type === 'text' ? 'text' : 'tag'
   return (
     <div
       sx={{
@@ -115,9 +115,10 @@ function NodeEditor({ value, onChange, onRemove }: TagEditorProps) {
           value={nodeType}
           onChange={(value) => {
             if (value === 'text') {
-              onChange('')
+              onChange({ type: 'text', value: '' })
             } else {
               onChange({
+                type: 'element',
                 tagName: 'div',
               })
             }
@@ -136,12 +137,20 @@ function NodeEditor({ value, onChange, onRemove }: TagEditorProps) {
 }
 
 function NodeSwitch({ value, onChange }: EditorProps) {
-  if (typeof value === 'string') {
+  if (value.type === 'text') {
     return (
       <div>
         <Label>
           Content
-          <input value={value} onChange={(e) => onChange(e.target.value)} />
+          <input
+            value={value.value}
+            onChange={(e) =>
+              onChange({
+                ...value,
+                value: e.target.value,
+              })
+            }
+          />
         </Label>
       </div>
     )
@@ -182,7 +191,7 @@ function NodeSwitch({ value, onChange }: EditorProps) {
             onChange={(newAttributes) =>
               onChange({ ...value, attributes: newAttributes })
             }
-            element={value.tagName}
+            element={value.tagName as string}
           />
         </div>
       </article>
@@ -241,11 +250,11 @@ function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
       onClick={() => onSelect(path)}
     >
       &lt;{value.tagName}
-      {!open || isVoidElement(value.tagName) ? ' /' : null}&gt;
+      {!open || isVoidElement(value.tagName as string) ? ' /' : null}&gt;
     </button>
   )
 
-  if (isVoidElement(value.tagName)) {
+  if (isVoidElement(value.tagName as string)) {
     return tagButton
   }
 
@@ -276,7 +285,12 @@ function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
               <Fragment key={i}>
                 <AddChildButton
                   onClick={() => {
-                    onChange(addChildAtPath(value, [i], ''))
+                    onChange(
+                      addChildAtPath(value, [i], {
+                        type: 'text',
+                        value: '',
+                      })
+                    )
                     onSelect(null)
                   }}
                 />
@@ -296,7 +310,12 @@ function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
           })}
           <AddChildButton
             onClick={() => {
-              onChange(addChildAtPath(value, [value.children?.length ?? 0], ''))
+              onChange(
+                addChildAtPath(value, [value.children?.length ?? 0], {
+                  type: 'text',
+                  value: '',
+                })
+              )
               onSelect(null)
             }}
           />

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

@@ -1,12 +1,14 @@
 export interface ElementData {
-  tagName: string
+  type: 'element' | 'text'
+  tagName?: string
   attributes?: Record<string, string>
   // `style` is an attribute, but we treat it specially for CSS.gui
   style?: Record<string, any>
+  value?: string
   children?: HtmlNode[]
 }
 
-export type HtmlNode = ElementData | string
+export type HtmlNode = ElementData
 export type ElementPath = number[]
 
 export const enum HTMLTag {

packages/gui/src/lib/transformers/html-to-editor-schema.ts

@@ -16,7 +16,6 @@ export const htmlToEditorSchema = (text: string) => {
     .use(cleanNewLines)
     // @ts-ignore
     .use(propertiesToAttributes)
-    .use(textNodesToStrings)
     .runSync(tree)
 
   const htmlBody = processedTree.children[0]