fix(heading): issue #20 - heading rendering of inner content format blocks (#22)

* fix(heading): issue #20 - heading rendering of inner content format blocks

* fix defaults

Author: cyp3rius

README.md

@@ -130,6 +130,15 @@ type StrapiBlockUserTheme = {
       h4?: string[];
       h5?: string[];
       h6?: string[];
+      content: {
+        block?: string[];
+        span?: string[];
+        strong?: string[];
+        italic?: string[];
+        underline?: string[];
+        strikethrough?: string[];
+        link?: string[];
+      } 
     };
     paragraph?: {
       block?: string[];
@@ -185,7 +194,16 @@ const StrapiBlockThemeDefault = {
     h3: ['text-2xl', 'font-bold', 'mb-3'],
     h4: ['text-xl', 'font-bold', 'mb-2'],
     h5: ['text-lg', 'font-bold', 'mb-2'],
-    h6: ['text-base', 'font-bold', 'mb-2']
+    h6: ['text-base', 'font-bold', 'mb-2'],
+    content: {
+      block: [],
+      span: [],
+      strong: ['font-bold'],
+      italic: ['italic'],
+      underline: ['underline'],
+      strikethrough: ['line-through'],
+      link: ['text-blue-500', 'underline', 'hover:text-blue-800'],
+    },
   },
   paragraph: {
     block: ['mb-4'],

src/components/blocks/StrapiBlockHeading.astro

@@ -1,8 +1,13 @@
 ---
 import StrapiBlockCustom from "./StrapiBlockCustom.astro";
+import StrapiBlockTextItemComponent from "./items/StrapiBlockTextItem.astro";
 
 import { StrapiBlockThemeDefault, getPropertyClass } from "../../lib";
-import type { AstroComponent, StrapiBlockTextItem, StrapiBlockTheme } from "../../types";
+import type {
+    AstroComponent,
+    StrapiBlockTextItem,
+    StrapiBlockTheme,
+} from "../../types";
 
 type Props = {
     level: number;
@@ -12,23 +17,53 @@ type Props = {
     theme: StrapiBlockTheme;
 };
 
-const { data, level = 2, class: classes = '', theme = StrapiBlockThemeDefault, block } = Astro.props;
+const {
+    data,
+    level = 2,
+    class: classes = "",
+    theme = StrapiBlockThemeDefault,
+    block,
+} = Astro.props;
 
 const sanitizedData = data.filter(({ text }: StrapiBlockTextItem) => text);
-const headingTag = `h${level}` as keyof StrapiBlockTheme['heading'];
+const headingTag = `h${level}` as keyof StrapiBlockTheme["heading"];
 const Tag = headingTag;
 
-const blockClasses = classes ? classes.split(' ') : [];
-const headingClasses = [...blockClasses, ...getPropertyClass(theme, ['heading', headingTag])];
-
+const blockClasses = classes ? classes.split(" ") : [];
+const headingClasses = [
+    ...blockClasses,
+    ...getPropertyClass(theme, ["heading", headingTag]),
+];
 ---
+
 {
     sanitizedData.length && (
         <>
-            { block && (<StrapiBlockCustom {...Astro.props} comp={block} data={sanitizedData[0]} />)}
-            { !block && (sanitizedData.map(({ text }: StrapiBlockTextItem) => {
-                    return (<Tag class={headingClasses.join(' ')}>{text}</Tag>);
-                })
+            {block && (
+                <StrapiBlockCustom
+                    {...Astro.props}
+                    comp={block}
+                    data={sanitizedData[0]}
+                />
+            )}
+            {!block &&
+                sanitizedData.map(({ text }: StrapiBlockTextItem) => {
+                    return <Tag class={headingClasses.join(" ")}>{text}</Tag>;
+                })}
+            {!block && (
+                <Tag class={headingClasses.join(" ")}>
+                    {sanitizedData.map((item: StrapiBlockTextItem) => {
+                        if (typeof item === "string") {
+                            return item;
+                        }
+                        return (
+                            <StrapiBlockTextItemComponent
+                                data={item}
+                                theme={theme.heading.content || theme.paragraph || {}}
+                            />
+                        );
+                    })}
+                </Tag>
             )}
         </>
     )

src/lib/theme.ts

@@ -10,6 +10,15 @@ export const StrapiBlockThemeDefault: StrapiBlockTheme = {
         h4: ['text-3xl', 'font-bold', 'mb-4'],
         h5: ['text-2xl', 'font-bold', 'mb-4'],
         h6: ['text-xl', 'font-bold', 'mb-4'],
+        content: {
+            block: [],
+            span: [],
+            strong: ['font-bold'],
+            italic: ['italic'],
+            underline: ['underline'],
+            strikethrough: ['line-through'],
+            link: ['text-blue-500', 'underline', 'hover:text-blue-800'],
+        },
     },
     paragraph: {
         block: ['astro-strapi-block-paragraph', 'mb-4'],

src/types/theme.ts

@@ -10,6 +10,7 @@ export type StrapiBlockThemeHeading = {
     h4: Array<string>;
     h5: Array<string>;
     h6: Array<string>;
+    content: StrapiBlockThemeParagraph;
 }
 
 export type StrapiBlockThemeParagraph = {