From bf8d7839a7f8fc41be92c4d4b61bac774419f035 Mon Sep 17 00:00:00 2001
From: Aziz Abbas <aziz@builder.io>
Date: Tue, 19 Nov 2024 11:26:04 -0600
Subject: [PATCH] =?UTF-8?q?feat(react):=20allow=20editing=20symbols=20in?=
 =?UTF-8?q?=20the=20context=20of=20a=20parent=20page=20pr=E2=80=A6=20(#373?=
 =?UTF-8?q?6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…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
---
 .changeset/late-pugs-do.md           |  5 +++++
 packages/react/src/blocks/Symbol.tsx | 28 +++++++++++++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/late-pugs-do.md

diff --git a/.changeset/late-pugs-do.md b/.changeset/late-pugs-do.md
new file mode 100644
index 0000000000..93ec22afc9
--- /dev/null
+++ 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
index 81c9f82ab4..c287acfde8 100644
--- 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}