+ 
- {' '}
+
)
}
diff --git a/packages/gui/src/components/html/Editors/util.ts b/packages/gui/src/components/html/Editors/util.ts
new file mode 100644
index 00000000..d5d83aa9
--- /dev/null
+++ b/packages/gui/src/components/html/Editors/util.ts
@@ -0,0 +1,8 @@
+import { useHtmlEditor } from '../Provider'
+
+export const useNodeTypes = () => {
+ const { hasComponents } = useHtmlEditor()
+
+ const baseNodeTypes = ['text', 'tag']
+ return hasComponents ? [...baseNodeTypes, 'component', 'slot'] : baseNodeTypes
+}
diff --git a/packages/gui/src/components/html/FontTags.tsx b/packages/gui/src/components/html/FontTags.tsx
index 31279c0a..b2a7f0c7 100644
--- a/packages/gui/src/components/html/FontTags.tsx
+++ b/packages/gui/src/components/html/FontTags.tsx
@@ -1,11 +1,14 @@
import { debounce, uniq } from 'lodash-es'
import { useEffect, useState } from 'react'
+import { stringifyFontFamily } from '../../lib/stringify'
+import { Theme } from '../../types/theme'
import {
buildFontFamiliesHref,
buildVariableFontFamiliesHref,
} from '../inputs/FontFamily/FontTags'
+import { useTheme } from '../providers/ThemeContext'
-export function getStyleFonts(style: any): string[] {
+export function getStyleFonts(style: any, theme?: Theme): string[] {
if (!style) return []
let fonts: string[] = []
@@ -19,10 +22,10 @@ export function getStyleFonts(style: any): string[] {
}
}
- return uniq(fonts)
+ return uniq(fonts).map((font) => stringifyFontFamily(font, theme))
}
-export function getHTMLTreeFonts(root: any): string[] {
+export function getHTMLTreeFonts(root: any, theme?: Theme): string[] {
if (!root) return []
let treeFonts: any[] = []
@@ -31,7 +34,7 @@ export function getHTMLTreeFonts(root: any): string[] {
}
if (root.type === 'component' && root.value) {
- return [...treeFonts, ...getHTMLTreeFonts(root.value)]
+ return [...treeFonts, ...getHTMLTreeFonts(root.value, theme)]
}
if (!root.children) {
@@ -40,11 +43,11 @@ export function getHTMLTreeFonts(root: any): string[] {
for (const node of root.children) {
if (node.type !== 'text') {
- treeFonts = [...treeFonts, ...getHTMLTreeFonts(node)]
+ treeFonts = [...treeFonts, ...getHTMLTreeFonts(node, theme)]
}
}
- return uniq(treeFonts)
+ return uniq(treeFonts).map((font) => stringifyFontFamily(font, theme))
}
interface BuildHrefProps {
@@ -52,14 +55,18 @@ interface BuildHrefProps {
style: any
setStaticHref: Function
setVariableHref: Function
+ theme?: Theme
}
async function buildHrefs({
tree,
style,
setStaticHref,
setVariableHref,
+ theme,
}: BuildHrefProps) {
- const fonts = style ? getStyleFonts(style) : getHTMLTreeFonts(tree)
+ const fonts = style
+ ? getStyleFonts(style, theme)
+ : getHTMLTreeFonts(tree, theme)
const staticHref = await buildFontFamiliesHref(fonts)
const variableHref = await buildVariableFontFamiliesHref(fonts)
@@ -74,6 +81,7 @@ interface Props {
style?: any
}
export function HTMLFontTags({ htmlTree = {}, style }: Props) {
+ const theme = useTheme()
const [staticHref, setStaticHref] = useState
+ {' '}
{
if (!filterValue) {
return HTML_TAGS
@@ -193,12 +201,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}
@@ -214,6 +226,5 @@ function NodeSwitch({ value, onChange }: EditorProps) {
/>
-
+