@developer_tribe/react-builder 1.2.34 → 1.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.34",
+  "version": "1.2.35",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -81,22 +81,10 @@ export function useAttributesEditorModel({
 
   const isStyleKeyForWrite = useCallback(
     (name: string) => {
-      const metaCategory = attributeMeta?.[name]?.category;
-      if (metaCategory === 'style') return true;
       return styleAttributeKeys.has(name);
     },
-    [attributeMeta, styleAttributeKeys],
+    [styleAttributeKeys],
   );
-  const isStyleKeyForRead = useCallback(
-    (name: string) => {
-      if (isStyleKeyForWrite(name)) return true;
-      return !!(
-        styleBag && Object.prototype.hasOwnProperty.call(styleBag, name)
-      );
-    },
-    [isStyleKeyForWrite, styleBag],
-  );
-
   const legacyFlatStyleKeys = useMemo(
     () => findLegacyFlatStyleKeys(attributes, isStyleKeyForWrite),
     [attributes, isStyleKeyForWrite],
@@ -136,12 +124,12 @@ export function useAttributesEditorModel({
 
   const getAttributeValue = useCallback(
     (name: string) => {
-      if (isStyleKeyForRead(name)) {
+      if (isStyleKeyForWrite(name)) {
         return styleBag?.[name];
       }
       return (attributes as Record<string, unknown>)?.[name];
     },
-    [attributes, isStyleKeyForRead, styleBag],
+    [attributes, isStyleKeyForWrite, styleBag],
   );
 
   const projectColorsForPicker = useMemo<ProjectColors | undefined>(
@@ -379,6 +367,15 @@ export function useAttributesEditorModel({
         if (name in nextAttrs) delete nextAttrs[name];
       } else {
         nextAttrs[name] = val;
+        // If this key was previously misplaced inside styles bag (e.g. due to a
+        // past editor bug), clean it up so there is no stale duplicate.
+        if (isPlainObject(nextAttrs.styles) && name in nextAttrs.styles) {
+          const cleanedStyles = { ...nextAttrs.styles };
+          delete cleanedStyles[name];
+          nextAttrs.styles = Object.keys(cleanedStyles).length
+            ? cleanedStyles
+            : undefined;
+        }
       }
       const next: NodeData<NodeDefaultAttribute> = {
         ...baseData,

package/src/build-components/OnboardDot/OnboardDot.tsx

@@ -21,10 +21,12 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const attrs = node.attributes;
   const attrRecord = toAttributeRecord(attrs);
+  // Backward compat: existing JSON may still have these in styles bag (old editor bug).
+  // handleAttributeChange will clean them up on next edit.
   const stylesBag = getStyleBag(attrs);
   const dotType =
-    (stylesBag?.dotType as string | undefined) ??
     (attrRecord.dotType as string | undefined) ??
+    (stylesBag?.dotType as string | undefined) ??
     'normal_dot';
   const {
     previewMode,
@@ -35,15 +37,15 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
   } = useBuilderParams();
   // OnboardDot specific attributes
   const inactiveDotOpacity =
-    (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
+    (stylesBag?.inactive_dot_opacity as number | undefined) ??
     0.3;
   const inactiveDotColorOverride =
-    (stylesBag?.inactive_dot_color as string | undefined) ??
-    (attrRecord.inactive_dot_color as string | undefined);
+    (attrRecord.inactive_dot_color as string | undefined) ??
+    (stylesBag?.inactive_dot_color as string | undefined);
   const activeDotColor =
-    (stylesBag?.active_dot_color as string | undefined) ??
-    (attrRecord.active_dot_color as string | undefined);
+    (attrRecord.active_dot_color as string | undefined) ??
+    (stylesBag?.active_dot_color as string | undefined);
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme, projectColors }),
     [activeDotColor, theme, projectColors],
@@ -69,8 +71,8 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
   const dotThicknessRaw =
-    (stylesBag?.dot_thickness as string | number | undefined) ??
-    (attrRecord.dot_thickness as string | number | undefined);
+    (attrRecord.dot_thickness as string | number | undefined) ??
+    (stylesBag?.dot_thickness as string | number | undefined);
   const dotSizeCss = useMemo((): string => {
     const parsed = parseSize(dotThicknessRaw, baseSize);
     if (parsed === undefined) return '10px';

package/src/build-components/OnboardDot/pattern.json

@@ -49,7 +49,7 @@
         "specialCategory": null,
         "sort": 1
       },
-          "dot_thickness": {
+      "dot_thickness": {
         "label": "Dot Thickness",
         "description": "Dot size/diameter.",
         "category": "style",
@@ -77,7 +77,7 @@
         "specialCategory": null,
         "sort": 5
       }
-  }
+    }
   }
 }
  

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -9,7 +9,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { defaultLocalization } from '../../types/PreviewConfig';
 import { parseColor } from '../../utils/parseColor';
-import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
+import { toAttributeRecord } from '../../utils/attributeStyle';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -94,6 +94,7 @@ function buildSegments(
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
   useLogRender('OnboardFooter');
   node = useNode(node);
+  console.log('node', node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardFooter';
   const {
     localization: builderLocalization,
@@ -110,18 +111,12 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
 
   const attrs = node?.attributes;
   const attrRecord = toAttributeRecord(attrs);
-  const styleBag = getStyleBag(attrs);
   const text = t(attrs?.textLocalizationKey);
   const textStyle = useExtractTextStyle(node, true);
   const viewStyle = useExtractViewStyle(node);
 
-  // Read linked-word colors from both top-level attributes and the styles bag.
-  // The editor saves them inside `styles` (meta category === 'style'),
-  // but legacy JSON may have them at the top level.
-  const rawFirstColor = (attrRecord.linkedWordFirstColor ??
-    styleBag?.linkedWordFirstColor) as string | undefined;
-  const rawSecondColor = (attrRecord.linkedWordSecondColor ??
-    styleBag?.linkedWordSecondColor) as string | undefined;
+  const rawFirstColor = attrRecord.linkedWordFirstColor as string | undefined;
+  const rawSecondColor = attrRecord.linkedWordSecondColor as string | undefined;
 
   // Parse colors for linked words
   const parsedFirstColor = useMemo(