Update React Editor integration and clean up template

components/shopify/header.editor.tsx

@@ -11,16 +11,10 @@ export type HeaderBlockProps = {
   links?: Array<{ label: string; url: string }>;
 };
 
-/**
- * Content only: the store name, the logo, the announcement copy and the nav
- * labels. Stickiness, backdrop blur, spacing and the cart/search/account
- * affordances are the component's business, not the editor's.
- */
 const headerEditor: ComponentConfig<HeaderBlockProps> = {
   label: 'Header',
   icon: <Menu size={16} />,
   category: 'navigation',
-  // Shared across pages: edit it once and every page.json picks it up.
   global: true,
   defaultProps: {
     storeName: 'Shop',
@@ -47,9 +41,7 @@ const headerEditor: ComponentConfig<HeaderBlockProps> = {
     announcement: {
       label: 'Announcement',
       type: 'text',
-      // Deliberately not `contentEditable`: an inline-edited field arrives as a
-      // ReactNode, which stays truthy once emptied, so the bar would linger as
-      // an empty band. Keeping it a plain string makes "blank hides it" work.
+      // Keep this a string so blank copy can hide the announcement.
       placeholder: 'Leave empty to hide the bar',
     },
     announcementUrl: { label: 'Announcement link', type: 'text' },
@@ -76,9 +68,6 @@ const headerEditor: ComponentConfig<HeaderBlockProps> = {
       storeName={storeName}
       logoUrl={logoUrl}
       links={links}
-      // Header decides visibility: blank copy hides the bar, and the toggle
-      // hides it regardless — needed because an inline-edited field is a node,
-      // which can't be inspected for emptiness.
       showAnnouncement={showAnnouncement}
       announcement={announcement}
       announcementUrl={announcementUrl}