feat(react): allow editing symbols in the context of a parent page pr… (

#3736) …eview url Allow editing symbols when the preview URL is the parent page. Makes it easier to tweak symbols by letting you edit them directly where they're being used, rather than having to find and open the symbol file separately. Way more convenient for users
BuilderIO · Nov 19, 2024 · bf8d783 · bf8d783
1 parent 78b8e5d
commit bf8d783
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/.changeset/late-pugs-do.md b/.changeset/late-pugs-do.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/react": patch
+---
+
+feat: allow symbols to be edited in the context of a parent entry
diff --git a/packages/react/src/blocks/Symbol.tsx b/packages/react/src/blocks/Symbol.tsx
@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/core';
 import React, { PropsWithChildren } from 'react';
 import { BuilderComponent } from '../components/builder-component.component';
-import { Builder, BuilderElement } from '@builder.io/sdk';
+import { Builder, BuilderElement, builder } from '@builder.io/sdk';
 import hash from 'hash-sum';
 import { NoWrap } from '../components/no-wrap';
 import { BuilderStoreContext } from '../store/builder-store';
@@ -50,6 +50,7 @@ export interface SymbolProps {
 class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
   ref: BuilderComponent | null = null;
   staticRef: HTMLDivElement | null = null;
+  isEditingThisSymbol = false;
 
   get placeholder() {
     return (
@@ -64,6 +65,16 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
     if (this.useStatic && this.staticRef && refs[this.props.builderBlock?.id!]) {
       this.staticRef.parentNode?.replaceChild(refs[this.props.builderBlock?.id!], this.staticRef);
     }
+    Builder.nextTick(() => {
+      const { model, entry } = this.props.symbol || {};
+      // allows editing of symbols in the context of a parent page
+      this.isEditingThisSymbol = Boolean(
+        Builder.isEditing &&
+          model === builder.editingModel &&
+          entry &&
+          location.search.includes(`overrides.${entry}`)
+      );
+    });
   }
 
   get useStatic() {
@@ -97,6 +108,10 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
       showPlaceholder = true;
     }
 
+    if (this.isEditingThisSymbol) {
+      showPlaceholder = false;
+    }
+
     let key = dynamic ? undefined : [model, entry].join(':');
     const dataString = Builder.isEditing ? null : data && size(data) && hash(data);
 
@@ -105,7 +120,9 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
     }
     const attributes = this.props.attributes || {};
     return (
-      <BuilderStoreContext.Consumer key={(model || 'no model') + ':' + (entry || 'no entry')}>
+      <BuilderStoreContext.Consumer
+        key={(model || 'no model') + ':' + (entry || 'no entry' + this.isEditingThisSymbol)}
+      >
         {state => {
           const builderComponentKey = `${key}_${state?.state?.locale || 'Default'}`;
           return (
@@ -139,7 +156,12 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
                   inlineContent={symbol?.inline}
                   {...(content && { content })}
                   key={builderComponentKey}
-                  options={{ key: builderComponentKey, noEditorUpdates: true }}
+                  options={{
+                    ...(!this.isEditingThisSymbol && {
+                      key: builderComponentKey,
+                      noEditorUpdates: true,
+                    }),
+                  }}
                   codegen={!!content?.data?.blocksJs}
                   hydrate={state.state?._hydrate}
                   builderBlock={this.props.builderBlock}