diff --git a/.changeset/poor-ties-attack.md b/.changeset/poor-ties-attack.md new file mode 100644 index 00000000..cb4648ae --- /dev/null +++ b/.changeset/poor-ties-attack.md @@ -0,0 +1,5 @@ +--- +"@compai/css-gui": patch +--- + +Use text node rather than string diff --git a/apps/docs/pages/html-editor.tsx b/apps/docs/pages/html-editor.tsx index b638901b..7fe2bcc8 100644 --- a/apps/docs/pages/html-editor.tsx +++ b/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', + }, + ], }, ], } diff --git a/packages/gui/src/components/html/FontTags.tsx b/packages/gui/src/components/html/FontTags.tsx index 491a44f6..9e383b1b 100644 --- a/packages/gui/src/components/html/FontTags.tsx +++ b/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) } diff --git a/packages/gui/src/components/html/Renderer.tsx b/packages/gui/src/components/html/Renderer.tsx index 7793e1b9..60c78e34 100644 --- a/packages/gui/src/components/html/Renderer.tsx +++ b/packages/gui/src/components/html/Renderer.tsx @@ -52,8 +52,8 @@ function ElementRenderer({ value, path }: ElementRendererProps) { {children.map((child, i) => { - if (typeof child === 'string') { - return child + if (child.type === 'text') { + return child.value } return })} diff --git a/packages/gui/src/components/html/editor.tsx b/packages/gui/src/components/html/editor.tsx index 2ae7e96d..0e7f03cf 100644 --- a/packages/gui/src/components/html/editor.tsx +++ b/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 (
{ 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 (
) @@ -182,7 +191,7 @@ function NodeSwitch({ value, onChange }: EditorProps) { onChange={(newAttributes) => onChange({ ...value, attributes: newAttributes }) } - element={value.tagName} + element={value.tagName as string} />
@@ -241,11 +250,11 @@ function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) { onClick={() => onSelect(path)} > <{value.tagName} - {!open || isVoidElement(value.tagName) ? ' /' : null}> + {!open || isVoidElement(value.tagName as string) ? ' /' : null}> ) - if (isVoidElement(value.tagName)) { + if (isVoidElement(value.tagName as string)) { return tagButton } @@ -276,7 +285,12 @@ function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) { { - onChange(addChildAtPath(value, [i], '')) + onChange( + addChildAtPath(value, [i], { + type: 'text', + value: '', + }) + ) onSelect(null) }} /> @@ -296,7 +310,12 @@ function TreeNode({ value, path, onSelect, onChange }: TreeNodeProps) { })} { - onChange(addChildAtPath(value, [value.children?.length ?? 0], '')) + onChange( + addChildAtPath(value, [value.children?.length ?? 0], { + type: 'text', + value: '', + }) + ) onSelect(null) }} /> diff --git a/packages/gui/src/components/html/types.ts b/packages/gui/src/components/html/types.ts index c6e72401..d1809543 100644 --- a/packages/gui/src/components/html/types.ts +++ b/packages/gui/src/components/html/types.ts @@ -1,12 +1,14 @@ export interface ElementData { - tagName: string + type: 'element' | 'text' + tagName?: string attributes?: Record // `style` is an attribute, but we treat it specially for CSS.gui style?: Record + value?: string children?: HtmlNode[] } -export type HtmlNode = ElementData | string +export type HtmlNode = ElementData export type ElementPath = number[] export const enum HTMLTag { diff --git a/packages/gui/src/lib/transformers/html-to-editor-schema.ts b/packages/gui/src/lib/transformers/html-to-editor-schema.ts index c69f01f7..aebc844f 100644 --- a/packages/gui/src/lib/transformers/html-to-editor-schema.ts +++ b/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]