@developer_tribe/react-builder 1.2.18 → 1.2.19

package/src/components/Builder.tsx

@@ -11,6 +11,8 @@ import { useLogRender } from '../utils/useLogRender';
 import { getDefaultsForType, getPatternByType } from '../utils/patterns';
 import { AddComponentModal } from '../modals/AddComponentModal';
 import { BuilderButton } from './BuilderButton';
+import { generateRandomKeyForNode } from '../utils/generateRandomKeyForNode';
+import { collectNodeKeys } from '../utils/repairNodeKeys';
 
 type BuilderEditorProps = {
   data: Node;
@@ -156,6 +158,7 @@ export function Builder({
 }: BuilderEditorProps) {
   useLogRender('Builder');
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const usedKeys = useMemo(() => collectNodeKeys(data), [data]);
   const breadcrumbPath = useMemo(() => {
     const path = findNodePath(data, current);
     if (path.length) return path;
@@ -190,7 +193,8 @@ export function Builder({
 
   const handleAddChild = useCallback(
     (type: string) => {
-      const nextChild = createDefaultNode(type);
+      const nextUsedKeys = new Set(usedKeys);
+      const nextChild = createDefaultNode(type, nextUsedKeys);
 
       // Root (or selection) can be empty/null-ish: allow creating the first node.
       if (isNodeNullOrUndefined(current)) {
@@ -247,7 +251,7 @@ export function Builder({
       setData(updatedRoot);
       setCurrent(updatedParent);
     },
-    [current, data, setData, setCurrent],
+    [current, data, setData, setCurrent, usedKeys],
   );
 
   const allowedChildTypes = useMemo(
@@ -383,17 +387,26 @@ export function Builder({
     return root;
   }
 
-  function createDefaultNode(type: string): NodeData<NodeDefaultAttribute> {
+  function createDefaultNode(
+    type: string,
+    nextUsedKeys: Set<string>,
+  ): NodeData<NodeDefaultAttribute> {
     const pattern = getPatternByType(type)?.pattern;
     const defaults = getDefaultsForType(type) ?? {};
     const childrenSchema = pattern?.children as unknown;
+    let key = '';
+    do {
+      key = generateRandomKeyForNode(type);
+    } while (nextUsedKeys.has(key));
+    nextUsedKeys.add(key);
 
     // Special-case: CarouselProvider MUST contain a Carousel container inside the viewport
     // otherwise embla-carousel will crash (it expects viewport.firstChild.children).
     if (type === 'CarouselProvider') {
       return {
         type,
-        children: createDefaultNode('Carousel'),
+        key,
+        children: createDefaultNode('Carousel', nextUsedKeys),
         attributes: { ...defaults },
       } as NodeData<NodeDefaultAttribute>;
     }
@@ -412,13 +425,14 @@ export function Builder({
       children = null;
     } else if (typeof childrenSchema === 'string') {
       // Specific child type like 'CarouselItem' – seed with one child to match the pattern.
-      children = [createDefaultNode(childrenSchema)];
+      children = [createDefaultNode(childrenSchema, nextUsedKeys)];
     } else {
       children = null;
     }
 
     return {
       type,
+      key,
       children,
       attributes: { ...defaults },
     } as NodeData<NodeDefaultAttribute>;

package/src/components/EditorHeader.tsx

@@ -3,6 +3,7 @@ import type { Device } from '../types/Device';
 import type { Node } from '../types/Node';
 import { copyNode } from '../utils/copyNode';
 import { getDevices } from '../utils/getDevices';
+import { collectNodeKeys, repairNodeKeys } from '../utils/repairNodeKeys';
 import { useRenderStore } from '../store';
 import { useLogRender } from '../utils/useLogRender';
 import { DeviceButton } from './DeviceButton';
@@ -120,7 +121,9 @@ export function EditorHeader({
     if (!current || !editorData || !setEditorData) return;
     if (!copiedNode) return;
     const cloned = JSON.parse(JSON.stringify(copiedNode)) as Node;
-    const updated = replaceNode(editorData, current, cloned);
+    const usedKeys = collectNodeKeys(editorData);
+    const repaired = repairNodeKeys(cloned, usedKeys);
+    const updated = replaceNode(editorData, current, repaired);
     useRenderStore.setState({
       copiedNode: null,
     });
@@ -129,7 +132,7 @@ export function EditorHeader({
     // Important: selection is stored by reference. After replacing `current` in the tree,
     // we must point selection to the new (cloned) node reference to keep "current node"
     // in sync with what’s rendered/edited.
-    setCurrent(cloned);
+    setCurrent(repaired);
   };
 
   const cloneNode = (node: Node): Node =>
@@ -137,7 +140,7 @@ export function EditorHeader({
 
   const handleReplaceFromSample = (sample: Project) => {
     if (!setEditorData) return;
-    const next = cloneNode(sample.data);
+    const next = repairNodeKeys(cloneNode(sample.data));
     setEditorData(next);
     setCurrent(next);
     if (sample.appConfig) setAppConfig(sample.appConfig);
@@ -148,6 +151,7 @@ export function EditorHeader({
   const handlePasteFromSample = (sample: Project) => {
     if (!current || !editorData || !setEditorData) return;
     const incoming = cloneNode(sample.data);
+    const usedKeys = collectNodeKeys(editorData);
 
     const isRecord = (v: unknown): v is Record<string, unknown> =>
       typeof v === 'object' && v !== null && !Array.isArray(v);
@@ -181,13 +185,19 @@ export function EditorHeader({
       toast.error('Sample has no children to paste');
       return;
     }
+    const repairedPasteNodes = pasteNodes.map((node) =>
+      repairNodeKeys(node, usedKeys),
+    );
     let nextChildren: Node;
     if (!prevChildren) {
-      nextChildren = pasteNodes.length === 1 ? pasteNodes[0] : pasteNodes;
+      nextChildren =
+        repairedPasteNodes.length === 1
+          ? repairedPasteNodes[0]
+          : repairedPasteNodes;
     } else if (Array.isArray(prevChildren)) {
-      nextChildren = [...prevChildren, ...pasteNodes];
+      nextChildren = [...prevChildren, ...repairedPasteNodes];
     } else {
-      nextChildren = [prevChildren, ...pasteNodes];
+      nextChildren = [prevChildren, ...repairedPasteNodes];
     }
 
     const nextNode: Node = { ...current, children: nextChildren } as Node;

package/src/components/JsonTextEditor.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import type { Node } from '../types/Node';
+import { wrapNodeInMain } from '../utils/wrapNodeInMain';
 
 type JsonTextEditorProps = {
   value: unknown;
@@ -74,6 +76,34 @@ export function JsonTextEditor({
     }
   };
 
+  const handleWrapInMain = () => {
+    try {
+      const parsed = JSON.parse(text) as unknown;
+      const isRecord = (v: unknown): v is Record<string, unknown> =>
+        typeof v === 'object' && v !== null && !Array.isArray(v);
+
+      // Support both:
+      // - node JSON (wrap root)
+      // - project JSON (wrap `data`)
+      const nextValue =
+        isRecord(parsed) && 'data' in parsed
+          ? {
+              ...(parsed as any),
+              data: wrapNodeInMain((parsed as any).data as Node),
+            }
+          : wrapNodeInMain(parsed as Node);
+
+      setText(JSON.stringify(nextValue, null, 2));
+      setParseError(null);
+      setApplyError(null);
+      setParsedValue(nextValue);
+      // Intentionally NOT calling onChange here:
+      // user can review diff and press "Apply" explicitly.
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : 'Invalid JSON');
+    }
+  };
+
   const headerLabel = rootName ? `${rootName}.json` : 'data.json';
 
   return (
@@ -108,6 +138,17 @@ export function JsonTextEditor({
           >
             Format
           </button>
+          {!readOnly && (
+            <button
+              type="button"
+              className="editor-button"
+              onClick={handleWrapInMain}
+              disabled={!onChange}
+              title={onChange ? 'Wrap root in Main and apply' : 'Read only'}
+            >
+              Wrap in Main
+            </button>
+          )}
           {!readOnly && (
             <button
               type="button"

package/src/pages/DebugJsonPage.tsx

@@ -5,6 +5,7 @@ import { Checkbox } from '../components/Checkbox';
 import { JsonTextEditor } from '../components/JsonTextEditor';
 import { analyseAndProccess } from '../utils/analyseNode';
 import { logRenderStore } from '../utils/logRenderStore';
+import { useRenderStore } from '../store';
 
 export type DebugJsonPageProps = {
   data: Node | null | undefined;
@@ -36,6 +37,7 @@ export function DebugJsonPage({
   setAppConfig,
   logLabel,
 }: DebugJsonPageProps) {
+  const setCurrent = useRenderStore((s) => s.setCurrent);
   const canTogglePreviewMode = typeof setPreviewMode === 'function';
   const canToggleTheme =
     typeof setAppConfig === 'function' && typeof appConfig?.theme === 'string';
@@ -43,6 +45,19 @@ export function DebugJsonPage({
     typeof setAppConfig === 'function' &&
     typeof (appConfig as any)?.isRtl !== 'undefined';
 
+  const isRecord = (v: unknown): v is Record<string, unknown> =>
+    typeof v === 'object' && v !== null && !Array.isArray(v);
+
+  const extractNode = (value: unknown): Node => {
+    // Allow both:
+    // - raw Node JSON
+    // - Project wrapper JSON { name, version, data: Node }
+    if (isRecord(value) && 'data' in value) {
+      return (value as any).data as Node;
+    }
+    return value as Node;
+  };
+
   return (
     <>
       <div className="modal__header localication-modal__header">
@@ -123,9 +138,15 @@ export function DebugJsonPage({
           <JsonTextEditor
             rootName="node"
             value={data ?? ({} as any)}
-            onChange={(next) =>
-              setData(analyseAndProccess(next as Node) as Node)
-            }
+            onChange={(next) => {
+              const nodeCandidate = extractNode(next);
+              const processed = analyseAndProccess(
+                nodeCandidate as Node,
+              ) as Node;
+              setData(processed);
+              // Keep selection in sync with the new root.
+              setCurrent(processed);
+            }}
             className="localication-modal__json-editor"
           />
         </div>

package/src/pages/ProjectDebug.tsx

@@ -5,25 +5,7 @@ import type { Node } from '../types/Node';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 import { useSyncHtmlThemeClass } from '../hooks/useSyncHtmlThemeClass';
-
-function safeStringify(value: unknown): string {
-  try {
-    const seen = new WeakSet<object>();
-    return JSON.stringify(
-      value,
-      (_key, v) => {
-        if (typeof v === 'object' && v !== null) {
-          if (seen.has(v as object)) return '[Circular]';
-          seen.add(v as object);
-        }
-        return v;
-      },
-      2,
-    );
-  } catch (e) {
-    return `<< Unable to stringify value: ${String(e)} >>`;
-  }
-}
+import { safeJsonStringify } from '../utils/safeJsonStringify';
 
 async function copyTextToClipboard(text: string): Promise<boolean> {
   try {
@@ -68,6 +50,24 @@ function isObject(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
+function extractNodeFromRawData(rawData: unknown): unknown {
+  // Support both:
+  // - raw node JSON (root has `type`)
+  // - full project JSON (root has `data`)
+  if (isObject(rawData)) {
+    if (typeof rawData.type === 'string' && rawData.type.trim()) return rawData;
+    const maybeData = rawData.data;
+    if (
+      isObject(maybeData) &&
+      typeof maybeData.type === 'string' &&
+      maybeData.type.trim()
+    ) {
+      return maybeData;
+    }
+  }
+  return rawData;
+}
+
 function getNodeType(value: unknown): string | null {
   if (!isObject(value)) return null;
   const t = value.type;
@@ -132,6 +132,14 @@ export type ProjectDebugProps = {
   benefits: PaywallBenefits;
   canvasBg?: string;
   belowName?: ReactNode;
+  jsonEditor?: {
+    value: string;
+    onChange: (next: string) => void;
+    error?: string | null;
+    onSave?: () => void;
+    saveDisabled?: boolean;
+    saveLabel?: string;
+  };
 };
 
 export function ProjectDebug({
@@ -143,6 +151,7 @@ export function ProjectDebug({
   benefits,
   canvasBg,
   belowName,
+  jsonEditor,
 }: ProjectDebugProps) {
   useSyncHtmlThemeClass();
   const [previewError, setPreviewError] = useState<{
@@ -155,16 +164,18 @@ export function ProjectDebug({
     'idle',
   );
 
-  const json = useMemo(() => safeStringify(rawData), [rawData]);
-  const previewData = rawData as Node;
-  const rootType = useMemo(() => getNodeType(rawData), [rawData]);
+  const json = useMemo(() => safeJsonStringify(rawData), [rawData]);
+  const jsonToCopy = jsonEditor ? jsonEditor.value : json;
+  const nodeRoot = useMemo(() => extractNodeFromRawData(rawData), [rawData]);
+  const previewData = nodeRoot as Node;
+  const rootType = useMemo(() => getNodeType(nodeRoot), [nodeRoot]);
   const parsedValidation = useMemo(
     () => parseValidationPrefix(validationError),
     [validationError],
   );
   const validationContext = useMemo(
-    () => resolveNodeTypeAtPath(rawData, parsedValidation.path),
-    [rawData, parsedValidation.path],
+    () => resolveNodeTypeAtPath(nodeRoot, parsedValidation.path),
+    [nodeRoot, parsedValidation.path],
   );
 
   const validationSummary = useMemo(() => {
@@ -241,7 +252,7 @@ export function ProjectDebug({
             type="button"
             className="editor-button"
             onClick={async () => {
-              const ok = await copyTextToClipboard(json);
+              const ok = await copyTextToClipboard(jsonToCopy);
               if (!ok) return;
               setJsonCopyState('copied');
               window.setTimeout(() => setJsonCopyState('idle'), 900);
@@ -249,13 +260,40 @@ export function ProjectDebug({
           >
             {jsonCopyState === 'copied' ? 'Copied JSON' : 'Copy JSON'}
           </button>
+          {jsonEditor?.onSave && (
+            <button
+              type="button"
+              className="editor-button"
+              disabled={jsonEditor.saveDisabled}
+              onClick={() => jsonEditor.onSave?.()}
+            >
+              {jsonEditor.saveLabel ?? 'Save'}
+            </button>
+          )}
         </div>
         {belowName && (
           <div className="rb-project-debug__below-name">{belowName}</div>
         )}
-        <pre className="rb-project-debug__code" tabIndex={0}>
-          {json}
-        </pre>
+        {jsonEditor ? (
+          <>
+            <textarea
+              className="rb-project-debug__code-editor"
+              value={jsonEditor.value}
+              onChange={(e) => jsonEditor.onChange(e.target.value)}
+              spellCheck={false}
+              aria-label="Edit JSON"
+            />
+            {jsonEditor.error ? (
+              <div className="rb-project-debug__json-error" role="alert">
+                {jsonEditor.error}
+              </div>
+            ) : null}
+          </>
+        ) : (
+          <pre className="rb-project-debug__code" tabIndex={0}>
+            {json}
+          </pre>
+        )}
       </section>
 
       <section

package/src/pages/ProjectMigrationPage.tsx

@@ -9,6 +9,7 @@ export type ProjectMigrationPageProps = {
 
   projectVersion: string;
   requiredVersion: string;
+  showFixVersionMeta?: boolean;
 
   pendingMigrations: Array<{
     id: string;
@@ -25,6 +26,7 @@ export type ProjectMigrationPageProps = {
   migrating?: boolean;
   onContinueWithoutValidation?: () => void;
   onMigrateNow?: () => void;
+  onFixVersionMeta?: () => void;
 };
 
 export function ProjectMigrationPage({
@@ -32,6 +34,7 @@ export function ProjectMigrationPage({
   rawData,
   projectVersion,
   requiredVersion,
+  showFixVersionMeta,
   pendingMigrations,
   products,
   benefits,
@@ -40,6 +43,7 @@ export function ProjectMigrationPage({
   migrating,
   onContinueWithoutValidation,
   onMigrateNow,
+  onFixVersionMeta,
 }: ProjectMigrationPageProps) {
   const message = `Migration required: project version ${projectVersion} is lower than ${requiredVersion}.`;
 
@@ -78,6 +82,17 @@ export function ProjectMigrationPage({
               {migrating ? 'Migrating…' : 'Migrate now'}
             </button>
 
+            {showFixVersionMeta && (
+              <button
+                type="button"
+                className="editor-button"
+                disabled={!!migrating}
+                onClick={() => onFixVersionMeta?.()}
+              >
+                Fix version meta
+              </button>
+            )}
+
             <button
               type="button"
               className="editor-button"