attributes

Author: tesseralis

apps/docs/pages/components/html-editor.tsx

@@ -0,0 +1,25 @@
+import { HtmlEditor, HtmlRenderer } from '@compai/css-gui'
+import { useState } from 'react'
+const initialValue: any = {
+  tagName: 'div',
+  children: [
+    'hello ',
+    {
+      tagName: 'span',
+      children: ['world'],
+      style: {
+        color: 'tomato',
+      },
+    },
+  ],
+}
+
+export default function HtmlEditorExample() {
+  const [html, setHtml] = useState(initialValue)
+  return (
+    <div sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+      <HtmlEditor value={html} onChange={setHtml} />
+      <HtmlRenderer value={html} />
+    </div>
+  )
+}

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

@@ -2,7 +2,7 @@ import { Editor } from '../Editor'
 import { HtmlNode } from './types'
 import * as Collapsible from '@radix-ui/react-collapsible'
 import { useState } from 'react'
-import { isNil } from 'lodash-es'
+import { isNil, values } from 'lodash-es'
 import IconButton from '../ui/IconButton'
 import { Trash2 } from 'react-feather'
 import { Label } from '../primitives'
@@ -98,6 +98,15 @@ function NodeSwitch({ value, onChange }: EditorProps) {
           onChange={(e) => onChange({ ...value, tagName: e.target.value })}
         />
       </div>
+      <div>
+        <Label>Attributes</Label>
+        <AttributeEditor
+          value={value.attributes ?? {}}
+          onChange={(newAttributes) =>
+            onChange({ ...value, attributes: newAttributes })
+          }
+        />
+      </div>
       <div>
         <Label>Styles</Label>
         <Editor
@@ -223,6 +232,50 @@ function AddChildButton({ onClick }: { onClick(): void }) {
   )
 }
 
+interface AttributeEditorProps {
+  value: Record<string, string>
+  onChange(value: Record<string, string>): void
+}
+
+function AttributeEditor({ value = {}, onChange }: AttributeEditorProps) {
+  const [currentValue, setCurrentValue] = useState('')
+  return (
+    <div>
+      {Object.entries(value).map(([key, attrValue]) => {
+        return (
+          <div sx={{ display: 'flex' }}>
+            <Label>
+              {key}
+              <input
+                value={attrValue}
+                onChange={(e) => onChange({ ...value, [key]: e.target.value })}
+              />
+            </Label>
+            <IconButton>
+              <Trash2 size={14} />
+            </IconButton>
+          </div>
+        )
+      })}
+      <div sx={{ display: 'flex' }}>
+        <input
+          type="text"
+          value={currentValue}
+          onChange={(e) => setCurrentValue(e.target.value)}
+        />
+        <button
+          onClick={() => {
+            onChange({ ...value, [currentValue]: '' })
+            setCurrentValue('')
+          }}
+        >
+          + Add attribute
+        </button>
+      </div>
+    </div>
+  )
+}
+
 function getChildAtPath(element: HtmlNode, path: ElementPath): HtmlNode {
   if (path.length === 0) {
     return element