Merge pull request #590 from components-ai/prose-elements

Add an empty text node to prose elements

Author: johno

.changeset/green-tables-hunt.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add an empty text node to prose elements

packages/gui/src/components/html/Editors/NodeEditor.tsx

@@ -11,6 +11,7 @@ import { ComponentEditor } from '../Component'
 import { SlotEditor } from './SlotEditor'
 import { HTML_TAGS } from '../data'
 import { useNodeTypes } from './util'
+import { isProseElement } from '../../../lib/elements'
 
 interface EditorProps {
   value: HtmlNode
@@ -196,12 +197,16 @@ function NodeSwitch({ value, onChange }: EditorProps) {
                 ...defaultAttributes,
                 ...(value.attributes || {}),
               }
-              onChange({
+              const fullValue = {
                 ...value,
                 attributes: mergedAttributes,
                 tagName: selectedItem,
                 style: mergedStyles,
-              })
+              }
+              if (isProseElement(selectedItem) && !fullValue.children?.length) {
+                fullValue.children = [{ type: 'text', value: '' }]
+              }
+              onChange(fullValue)
             }}
             items={HTML_TAGS}
             value={value.tagName}

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

@@ -2,7 +2,7 @@ import { HtmlNode, ElementPath } from './types'
 import * as Collapsible from '@radix-ui/react-collapsible'
 import { useState } from 'react'
 import { useHtmlEditor } from './Provider'
-import { isVoidElement } from '../../lib/elements'
+import { isProseElement, isVoidElement } from '../../lib/elements'
 import { addChildAtPath, isSamePath, replaceAt } from './util'
 import { hasChildrenSlot } from '../../lib/codegen/util'
 import { Combobox } from '../primitives'
@@ -128,13 +128,17 @@ export function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) {
           ...defaultAttributes,
           ...(value.attributes || {}),
         }
-        setEditing(false)
-        onChange({
+        const fullValue = {
           ...value,
           attributes: mergedAttributes,
           tagName: selectedItem,
           style: mergedStyles,
-        })
+        }
+        if (isProseElement(selectedItem) && !fullValue.children?.length) {
+          fullValue.children = [{ type: 'text', value: '' }]
+        }
+        setEditing(false)
+        onChange(fullValue)
       }}
       items={HTML_TAGS}
       value={value.tagName}

packages/gui/src/lib/elements.ts

@@ -7,3 +7,8 @@ export const isElement = (str: string): boolean => {
 export const isVoidElement = (str: string): boolean => {
   return !!voidElements.filter((el) => str === el).length
 }
+
+const PROSE_ELEMENTS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+export const isProseElement = (str: string): boolean => {
+  return PROSE_ELEMENTS.includes(str)
+}