fix: apply flex-wrap to inline elements

nuxt-modules · Sep 12, 2024 · 5df3a67 · 5df3a67
1 parent 77893b0
commit 5df3a67
Showing 1 changed file with 32 additions and 6 deletions.
diff --git a/src/runtime/nitro/og-image/satori/plugins/flex.ts b/src/runtime/nitro/og-image/satori/plugins/flex.ts
@@ -14,22 +14,48 @@ const BLOCK_ELEMENTS = [
   'dl',
 ]
 
+const INLINE_ELEMENTS = [
+  'span',
+  'a',
+  'b',
+  'i',
+  'u',
+  'em',
+  'strong',
+  'code',
+  'abbr',
+  'del',
+  'ins',
+  'mark',
+  'sub',
+  'sup',
+  'small',
+  'p',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+]
+
 // automatically add missing flex rules
 export default defineSatoriTransformer({
   filter: (node: VNode) =>
-    node.type === 'div'
+    [...INLINE_ELEMENTS, 'div'].includes(node.type)
     && (Array.isArray(node.props?.children) && node.props?.children.length >= 1)
     && (!node.props?.class?.includes('hidden')),
   transform: (node: VNode) => {
     node.props.style = node.props.style || {}
     if (node.props.style?.display && node.props.style?.display !== 'flex') {
       return
     }
-    node.props.style.display = 'flex'
-    // if any of the children are divs we swap it to old behavior
-    if (!node.props?.class?.includes('flex-') && node.props.children!.some((child: VNode) => BLOCK_ELEMENTS.includes(child.type))) {
-      node.props.style.flexDirection = 'column'
-      return
+    if (node.type === 'div') {
+      node.props.style.display = 'flex'
+      // if any of the children are divs we swap it to old behavior
+      if (!node.props?.class?.includes('flex-') && node.props.children!.some((child: VNode) => BLOCK_ELEMENTS.includes(child.type))) {
+        node.props.style.flexDirection = 'column'
+        return
+      }
     }
     // inline elements
     let flexWrap = node.props?.class?.includes('flex-wrap')