@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/utils/extractImageStyle.ts

@@ -1,24 +1,21 @@
 import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
 import type { NodeData } from '../types/Node';
+import { extractViewStyle, ExtractViewStyleOptions } from './extractViewStyle';
 
 export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
   const style: React.CSSProperties = {};
 
   if (!attributes) return style;
 
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius = attributes.borderRadius;
-
   // Map resizeMode to CSS object-fit
   if (attributes.resizeMode === 'cover') style.objectFit = 'cover';
   else if (attributes.resizeMode === 'contain') style.objectFit = 'contain';
   else if (attributes.resizeMode === 'stretch') style.objectFit = 'fill';
   else if (attributes.resizeMode === 'center') style.objectFit = 'none';
 
-  return style;
+  return { ...extractViewStyle(node, options), ...style };
 }

package/src/utils/extractTextStyle.ts

@@ -1,16 +1,96 @@
 import type { NodeData } from '../types/Node';
 import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../types/PreviewConfig';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
 import { fs, parseSize } from '../size-matters';
+import { parseColor } from './parseColor';
+import { extractViewStyle } from './extractViewStyle';
+import { normalizeFontWeight } from './fontWeight';
 import { useRenderStore } from '../store';
+import {
+  findFontDefinition,
+  loadFontFamily,
+  resolveClosestFontWeightKey,
+} from './loadFontFamily';
+import { fontsDebug } from './fontsDebug';
+
+const inFlightFontLoads: Map<string, Promise<void>> = new Map();
+
+function weightToNumericKey(weight: unknown): string | undefined {
+  const normalized = normalizeFontWeight(weight);
+  if (!normalized) return undefined;
+  if (normalized === 'normal') return '400';
+  if (normalized === 'bold') return '700';
+  // already '100'..'900'
+  return normalized;
+}
+
+function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
+  if (typeof document === 'undefined') return;
+  const name = familyName.trim();
+  if (!name) return;
+  const weight = weightKey?.trim() || '400';
+  const cacheKey = `${name}@${weight}`;
+  if (inFlightFontLoads.has(cacheKey)) return;
+
+  fontsDebug.info('extractTextStyle: ensureFontWeightLoaded', {
+    familyName: name,
+    weight,
+  });
+
+  const { fonts, markFontLoaded, addError } = useRenderStore.getState();
+  const promise = loadFontFamily(fonts, name, {
+    preferWeight: weight,
+    forceFetch: true,
+  })
+    .then(() => {
+      fontsDebug.info('extractTextStyle: font weight loaded', {
+        familyName: name,
+        weight,
+      });
+      markFontLoaded(name);
+    })
+    .catch((e) => {
+      fontsDebug.compactError('extractTextStyle: font weight load failed', e, {
+        familyName: name,
+        weight,
+      });
+      addError(
+        `Failed to load font "${name}" (weight ${weight}): ${
+          e instanceof Error ? e.message : String(e)
+        }`,
+      );
+    })
+    .finally(() => {
+      inFlightFontLoads.delete(cacheKey);
+    });
+
+  inFlightFontLoads.set(cacheKey, promise);
+}
+
+type ExtractTextStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
 
 export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractTextStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  //TODO: it should be passed as a prop to the function (need a state)
-  const {
-    appConfig: { screenStyle, theme },
-  } = useRenderStore.getState();
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = <K extends keyof TextPropsGenerated['attributes']>(
+    key: K,
+  ): TextPropsGenerated['attributes'][K] | undefined => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key as unknown as string] as any;
+  };
+  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
+  const { screenStyle, theme } = resolvedAppConfig;
   const fallbackColor =
     theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
 
@@ -23,89 +103,58 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   }
 
   // Typography
-  if (attributes.fontSize !== undefined) {
-    const parsed = parseSize(attributes.fontSize);
+  const fontSize = get('fontSize') as any;
+  if (fontSize !== undefined) {
+    const parsed = parseSize(fontSize);
     style.fontSize = parsed as React.CSSProperties['fontSize'];
   } else {
     style.fontSize = fs(14);
   }
-  if (attributes.fontWeight) style.fontWeight = attributes.fontWeight;
-  style.color = attributes.color ?? fallbackColor;
-  if (attributes.textAlign)
-    style.textAlign = attributes.textAlign as React.CSSProperties['textAlign'];
+  const fontFamily = get('fontFamily') as any;
+  const fontWeight = get('fontWeight') as any;
+  const requestedWeight = weightToNumericKey(fontWeight);
+  const normalizedFontFamily =
+    typeof fontFamily === 'string' && fontFamily.trim().length > 0
+      ? fontFamily.trim()
+      : undefined;
+  if (normalizedFontFamily) {
+    // Resolve "closest available" weight for this family (e.g. if requested 100 but family starts at 300).
+    const { fonts } = useRenderStore.getState();
+    const def = findFontDefinition(fonts, normalizedFontFamily);
+    const resolvedWeightKey =
+      def?.family && typeof def.family === 'object'
+        ? resolveClosestFontWeightKey(
+            def.family as Record<string, string>,
+            requestedWeight,
+          )
+        : requestedWeight;
 
-  // Spacing
-  // Shorthand
-  if (attributes.padding !== undefined) style.padding = attributes.padding;
-  if (attributes.margin !== undefined) style.margin = attributes.margin;
+    fontsDebug.info('extractTextStyle: resolved font family/weight', {
+      fontFamily: normalizedFontFamily,
+      requestedWeight,
+      resolvedWeightKey,
+    });
 
-  // Axis shorthands
-  if (attributes.paddingHorizontal !== undefined) {
-    const v = parseSize(attributes.paddingHorizontal);
-    style.paddingLeft = v as React.CSSProperties['paddingLeft'];
-    style.paddingRight = v as React.CSSProperties['paddingRight'];
-  }
-  if (attributes.paddingVertical !== undefined) {
-    const v = parseSize(attributes.paddingVertical);
-    style.paddingTop = v as React.CSSProperties['paddingTop'];
-    style.paddingBottom = v as React.CSSProperties['paddingBottom'];
-  }
-  if (attributes.marginHorizontal !== undefined) {
-    const v = parseSize(attributes.marginHorizontal);
-    style.marginLeft = v as React.CSSProperties['marginLeft'];
-    style.marginRight = v as React.CSSProperties['marginRight'];
-  }
-  if (attributes.marginVertical !== undefined) {
-    const v = parseSize(attributes.marginVertical);
-    style.marginTop = v as React.CSSProperties['marginTop'];
-    style.marginBottom = v as React.CSSProperties['marginBottom'];
+    style.fontFamily = `"${normalizedFontFamily}"`;
+    // Ensure the correct weight file is available (lazy-load per weight).
+    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey);
+    // Important: set fontWeight to the actual weight we loaded so CSS requests match loaded face.
+    if (resolvedWeightKey) {
+      style.fontWeight = resolvedWeightKey;
+    }
   }
+  const normalizedFontWeight = normalizeFontWeight(fontWeight);
+  // If no fontFamily is set, keep previous behavior.
+  if (!normalizedFontFamily && normalizedFontWeight)
+    style.fontWeight = normalizedFontWeight;
+  const resolvedTextColor = parseColor(get('color') as any, {
+    projectColors: options.projectColors,
+    appConfig: resolvedAppConfig,
+  });
+  style.color = resolvedTextColor ?? fallbackColor;
+  const textAlign = get('textAlign') as any;
+  if (textAlign)
+    style.textAlign = textAlign as React.CSSProperties['textAlign'];
 
-  // Edges
-  if (attributes.paddingTop !== undefined)
-    style.paddingTop = parseSize(
-      attributes.paddingTop,
-    ) as React.CSSProperties['paddingTop'];
-  if (attributes.paddingBottom !== undefined)
-    style.paddingBottom = parseSize(
-      attributes.paddingBottom,
-    ) as React.CSSProperties['paddingBottom'];
-  if (attributes.paddingLeft !== undefined)
-    style.paddingLeft = parseSize(
-      attributes.paddingLeft,
-    ) as React.CSSProperties['paddingLeft'];
-  if (attributes.paddingRight !== undefined)
-    style.paddingRight = parseSize(
-      attributes.paddingRight,
-    ) as React.CSSProperties['paddingRight'];
-
-  if (attributes.marginTop !== undefined)
-    style.marginTop = parseSize(
-      attributes.marginTop,
-    ) as React.CSSProperties['marginTop'];
-  if (attributes.marginBottom !== undefined)
-    style.marginBottom = parseSize(
-      attributes.marginBottom,
-    ) as React.CSSProperties['marginBottom'];
-  if (attributes.marginLeft !== undefined)
-    style.marginLeft = parseSize(
-      attributes.marginLeft,
-    ) as React.CSSProperties['marginLeft'];
-  if (attributes.marginRight !== undefined)
-    style.marginRight = parseSize(
-      attributes.marginRight,
-    ) as React.CSSProperties['marginRight'];
-
-  // Decor
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius =
-      attributes.borderRadius as React.CSSProperties['borderRadius'];
-
-  // Dimensions (rare for text but supported by schema)
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-
-  return style;
+  return { ...extractViewStyle(node, options), ...style };
 }

package/src/utils/extractViewStyle.ts

@@ -1,18 +1,46 @@
 import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import type { NodeData } from '../types/Node';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+import { parseSize } from '../size-matters';
+import { parseColor } from './parseColor';
+
+export type ExtractViewStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
 
 export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  const scrollable = attributes?.scrollable ?? false;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = <K extends keyof ViewPropsGenerated['attributes']>(
+    key: K,
+  ): ViewPropsGenerated['attributes'][K] | undefined => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key as unknown as string] as any;
+  };
+
+  const scrollable = (get('scrollable') as any) ?? false;
   const style: React.CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
   };
   if (!attributes) return style;
+  const isEmptySizeValue = (value: unknown) =>
+    value === undefined ||
+    value === null ||
+    (typeof value === 'string' && value.trim() === '');
   if (scrollable) {
-    if (attributes.flexDirection === 'row') {
+    // Important for flex children: allow the element to shrink so overflow scroll can work.
+    style.minWidth = 0;
+    style.minHeight = 0;
+    if (get('flexDirection') === 'row') {
       style.overflowX = 'auto';
       style.overflowY = 'hidden';
       style.maxWidth = '100%';
@@ -24,21 +52,94 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
       style.maxWidth = '100%';
     }
   }
-  if (attributes.flexDirection) style.flexDirection = attributes.flexDirection;
-  if (attributes.alignItems)
-    style.alignItems =
-      attributes.alignItems as React.CSSProperties['alignItems'];
-  if (attributes.justifyContent)
+  const flexDirection = get('flexDirection');
+  if (flexDirection) style.flexDirection = flexDirection as any;
+  const alignItems = get('alignItems');
+  if (alignItems)
+    style.alignItems = alignItems as React.CSSProperties['alignItems'];
+  const justifyContent = get('justifyContent');
+  if (justifyContent)
     style.justifyContent =
-      attributes.justifyContent as React.CSSProperties['justifyContent'];
-  if (attributes.gap !== undefined) style.gap = attributes.gap;
-  if (attributes.padding !== undefined) style.padding = attributes.padding;
-  if (attributes.margin !== undefined) style.margin = attributes.margin;
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius = attributes.borderRadius;
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
+      justifyContent as React.CSSProperties['justifyContent'];
+  const setParsedSize = <K extends keyof React.CSSProperties>(
+    property: K,
+    rawValue: string | number | undefined,
+  ) => {
+    if (isEmptySizeValue(rawValue)) return;
+    const parsed = parseSize(rawValue);
+    style[property] = parsed as React.CSSProperties[K];
+  };
+
+  setParsedSize('gap', get('gap') as any);
+  setParsedSize('padding', get('padding') as any);
+  setParsedSize('margin', get('margin') as any);
+
+  const paddingHorizontal = get('paddingHorizontal') as any;
+  if (!isEmptySizeValue(paddingHorizontal)) {
+    const parsed = parseSize(paddingHorizontal);
+    style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
+    style.paddingRight = parsed as React.CSSProperties['paddingRight'];
+  }
+  const paddingVertical = get('paddingVertical') as any;
+  if (!isEmptySizeValue(paddingVertical)) {
+    const parsed = parseSize(paddingVertical);
+    style.paddingTop = parsed as React.CSSProperties['paddingTop'];
+    style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
+  }
+
+  // Explicit per-side paddings should override paddingHorizontal/paddingVertical.
+  setParsedSize('paddingTop', get('paddingTop') as any);
+  setParsedSize('paddingBottom', get('paddingBottom') as any);
+  setParsedSize('paddingLeft', get('paddingLeft') as any);
+  setParsedSize('paddingRight', get('paddingRight') as any);
+
+  const marginHorizontalRaw =
+    ((attributes as Record<string, unknown>).marginHorizontal as
+      | string
+      | number
+      | undefined) ?? (styleBag?.marginHorizontal as any);
+  if (!isEmptySizeValue(marginHorizontalRaw)) {
+    const parsed = parseSize(marginHorizontalRaw);
+    style.marginLeft = parsed as React.CSSProperties['marginLeft'];
+    style.marginRight = parsed as React.CSSProperties['marginRight'];
+  }
+
+  const marginVertical = get('marginVertical') as any;
+  if (!isEmptySizeValue(marginVertical)) {
+    const parsed = parseSize(marginVertical);
+    style.marginTop = parsed as React.CSSProperties['marginTop'];
+    style.marginBottom = parsed as React.CSSProperties['marginBottom'];
+  }
+
+  setParsedSize('marginTop', get('marginTop') as any);
+  setParsedSize('marginBottom', get('marginBottom') as any);
+  setParsedSize('marginLeft', get('marginLeft') as any);
+  setParsedSize('marginRight', get('marginRight') as any);
+  const backgroundColor = get('backgroundColor') as any;
+  if (backgroundColor) {
+    style.backgroundColor =
+      parseColor(backgroundColor, {
+        projectColors: options.projectColors,
+        appConfig: options.appConfig,
+      }) ?? backgroundColor;
+  }
+  setParsedSize('borderRadius', get('borderRadius') as any);
+  setParsedSize('width', get('width') as any);
+  setParsedSize('minWidth', get('minWidth') as any);
+  setParsedSize('maxWidth', get('maxWidth') as any);
+  setParsedSize('height', get('height') as any);
+  setParsedSize('minHeight', get('minHeight') as any);
+  setParsedSize('maxHeight', get('maxHeight') as any);
+  const flex = get('flex') as any;
+  if (flex !== undefined) style.flex = flex as React.CSSProperties['flex'];
+  const position = get('position') as any;
+  if (position) style.position = position as React.CSSProperties['position'];
+  setParsedSize('top', get('top') as any);
+  setParsedSize('bottom', get('bottom') as any);
+  setParsedSize('left', get('left') as any);
+  setParsedSize('right', get('right') as any);
+  const zIndex = get('zIndex') as any;
+  if (zIndex !== undefined)
+    style.zIndex = zIndex as React.CSSProperties['zIndex'];
   return style;
 }

package/src/utils/findNodeByKeyNested.ts

@@ -0,0 +1,32 @@
+import type { Node, NodeData } from '../types/Node';
+
+export function findNodeByKeyNested(node: Node, key: string): NodeData | null {
+  if (node === null || node === undefined) {
+    return null;
+  }
+
+  if (typeof node === 'string') {
+    return null;
+  }
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const found = findNodeByKeyNested(child, key);
+      if (found) {
+        return found;
+      }
+    }
+    return null;
+  }
+
+  const recordData = node as NodeData;
+  if (recordData.key === key) {
+    return recordData;
+  }
+
+  if (recordData.children) {
+    return findNodeByKeyNested(recordData.children as Node, key);
+  }
+
+  return null;
+}

package/src/utils/fontWeight.ts

@@ -0,0 +1,29 @@
+export const FONT_WEIGHT_OPTIONS = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+] as const;
+
+export type FontWeightOption = (typeof FONT_WEIGHT_OPTIONS)[number];
+
+export function normalizeFontWeight(
+  value: unknown,
+): FontWeightOption | undefined {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    const asString = String(value) as FontWeightOption;
+    return FONT_WEIGHT_OPTIONS.includes(asString) ? asString : undefined;
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim() as FontWeightOption;
+    return FONT_WEIGHT_OPTIONS.includes(trimmed) ? trimmed : undefined;
+  }
+  return undefined;
+}

package/src/utils/fontsDebug.ts

@@ -0,0 +1,16 @@
+type Payload = unknown;
+
+/**
+ * Intentionally silent logger for font pipeline.
+ * (We keep the interface so call sites don't need to change.)
+ */
+export const fontsDebug = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  info(_message: string, _payload?: Payload) {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  warn(_message: string, _payload?: Payload) {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  error(_message: string, _payload?: Payload) {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  compactError(_message: string, _error: unknown, _payload?: Payload) {},
+};

package/src/utils/getImage.ts

@@ -0,0 +1,76 @@
+export const TRIBE_ASSETS_BASE_URL =
+  'https://tribemarketing.s3.eu-central-1.amazonaws.com/tribehub-assets/';
+
+export enum TribeAssetName {
+  Android = 'android.svg',
+  Apple = 'apple.svg',
+  Background = 'background.jpg',
+}
+
+function normalizeAssetName(name: string): string {
+  const trimmed = name.trim().replace(/^\/+/, '');
+
+  // Common typos / aliases
+  if (trimmed === 'backgorund.jpg') return 'background.jpg';
+  if (trimmed === 'ios.svg') return 'apple.svg';
+
+  return trimmed;
+}
+
+function encodePath(path: string): string {
+  // Encode each segment but keep `/` separators intact.
+  return path
+    .split('/')
+    .filter(Boolean)
+    .map((seg) => encodeURIComponent(seg))
+    .join('/');
+}
+
+/**
+ * Returns a full CDN URL for a given asset name/path.
+ *
+ * Examples:
+ * - getImage(TribeAssetName.Android)
+ * - getImage(TribeAssetName.Apple) // also accepts 'ios.svg' via parseTribeAssetName/resolveImageSrc
+ * - getImage(TribeAssetName.Background) // also accepts 'backgorund.jpg' via parseTribeAssetName/resolveImageSrc
+ */
+export function getImage(name: TribeAssetName): string {
+  const normalized = normalizeAssetName(name);
+  const base = TRIBE_ASSETS_BASE_URL.endsWith('/')
+    ? TRIBE_ASSETS_BASE_URL
+    : `${TRIBE_ASSETS_BASE_URL}/`;
+
+  return `${base}${encodePath(normalized)}`;
+}
+
+export function parseTribeAssetName(name: string): TribeAssetName | null {
+  const normalized = normalizeAssetName(name);
+  switch (normalized) {
+    case TribeAssetName.Android:
+      return TribeAssetName.Android;
+    case TribeAssetName.Apple:
+      return TribeAssetName.Apple;
+    case TribeAssetName.Background:
+      return TribeAssetName.Background;
+    default:
+      return null;
+  }
+}
+
+function isAbsoluteUrl(src: string): boolean {
+  // Covers http(s), data, blob, and protocol-relative URLs.
+  return /^(https?:)?\/\//.test(src) || /^(data|blob):/.test(src);
+}
+
+/**
+ * Resolves a `src` value into a usable URL:
+ * - Absolute URLs are returned unchanged
+ * - Known tribe asset names (or aliases) are converted via `getImage`
+ * - Unknown relative strings are returned unchanged
+ */
+export function resolveImageSrc(src?: string | null): string | undefined {
+  if (!src) return undefined;
+  if (isAbsoluteUrl(src)) return src;
+  const parsed = parseTribeAssetName(src);
+  return parsed ? getImage(parsed) : src;
+}

package/src/utils/isCarousel.ts

@@ -1,28 +1,44 @@
 import { Node, NodeData } from '../types/Node';
+import { normalizeComponentType } from './patterns';
 
 export const isCarouselProvider = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carouselProvider';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'CarouselProvider'
+  );
 };
 
 export const isCarousel = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carousel';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'Carousel'
+  );
 };
 
 export const isCarouselItem = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carouselItem';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'CarouselItem'
+  );
 };
 
 export const isCarouselDots = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carouselDots';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'CarouselDots'
+  );
 };
 
 export const isCarouselButtons = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carouselButtons';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'CarouselButtons'
+  );
 };
 
 export const isCarouselComponent = (node: Node): boolean => {