@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/components/theme-editor/theme-placeholder-client.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import ThemeSection, { Section } from './theme-section';
+import {
+  registerPlaceholder,
+  unregisterPlaceholder
+} from './placeholder-registry';
+import { useVisibilityContext } from './hooks/use-visibility-context';
+import { applyVisibilityRulesToSections } from './utils/visibility-rules';
+import { isPublishWindowVisible } from './utils/publish-window';
+
+// Global flag to track if IFRAME_READY has been sent (survives component remount)
+declare global {
+  interface Window {
+    __iframeReadySent?: boolean;
+  }
+}
+
+interface ThemePlaceholderClientProps {
+  slug: string;
+  initialSections?: Section[];
+  initialPlaceholderId?: string;
+}
+
+export default function ThemePlaceholderClient({
+  slug,
+  initialSections = [],
+  initialPlaceholderId = ''
+}: ThemePlaceholderClientProps) {
+  const [sections, setSections] = useState<Section[]>(initialSections);
+  const [placeholderSlug, setPlaceholderSlug] =
+    useState<string>(initialPlaceholderId);
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(
+    null
+  );
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+  const [currentBreakpoint, setCurrentBreakpoint] = useState<string>('desktop');
+  const [isDesigner, setIsDesigner] = useState(false);
+  const visibilityContext = useVisibilityContext(currentBreakpoint);
+  const renderedSections = applyVisibilityRulesToSections(
+    sections,
+    visibilityContext
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const checkDesignerMode = () => {
+      return window.self !== window.top;
+    };
+
+    const isInIframe = checkDesignerMode();
+
+    if (isInIframe && window.parent) {
+      // Only send IFRAME_READY once per page session to prevent re-initialization
+      if (!window.__iframeReadySent) {
+        window.parent.postMessage(
+          {
+            type: 'IFRAME_READY'
+          },
+          '*'
+        );
+        window.__iframeReadySent = true;
+      }
+
+      registerPlaceholder(slug);
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      switch (event.data?.type) {
+        case 'SET_THEME_EDITOR_COOKIE':
+          if (event.data.data) {
+            setIsDesigner(true);
+          }
+          break;
+
+        case 'LOAD_THEME':
+        case 'UPDATE_THEME': {
+          const theme = event.data.data?.theme;
+          if (theme?.placeholders) {
+            const placeholder = theme.placeholders.find(
+              (p: { slug: string }) => p.slug === slug
+            );
+            if (placeholder) {
+              setPlaceholderSlug(placeholder.slug);
+              if (placeholder.sections) {
+                setSections(placeholder.sections);
+              }
+            }
+          }
+          break;
+        }
+
+        case 'SELECT_SECTION': {
+          const { sectionId } = event.data.data || {};
+          if (sectionId) {
+            setSelectedSectionId(sectionId);
+            setSelectedBlockId(null);
+          }
+          break;
+        }
+
+        case 'SELECT_BLOCK': {
+          const { blockId } = event.data.data || {};
+          if (blockId) {
+            setSelectedBlockId(blockId);
+            setSelectedSectionId(null);
+          }
+          break;
+        }
+
+        case 'CHANGE_BREAKPOINT': {
+          const { breakpoint } = event.data.data || {};
+          if (breakpoint) {
+            setCurrentBreakpoint(breakpoint);
+          }
+          break;
+        }
+
+        case 'CLEAR_SELECTION': {
+          setSelectedSectionId(null);
+          setSelectedBlockId(null);
+          break;
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      unregisterPlaceholder(slug);
+    };
+  }, [slug]);
+
+  const sendAction = (
+    action: string,
+    data: {
+      placeholderId?: string;
+      sectionId?: string;
+      blockId?: string;
+      label?: string;
+    }
+  ) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          type: action,
+          data
+        },
+        '*'
+      );
+    }
+  };
+
+  return (
+      <div data-placeholder={slug} className="theme-placeholder">
+      {renderedSections
+        .sort((a, b) => a.order - b.order)
+        .filter((section) =>
+          !section.hidden &&
+          (isDesigner ||
+            isPublishWindowVisible(section.properties?.['publish-window']))
+        )
+        .map((section) => (
+          <ThemeSection
+            key={section.id}
+            section={section}
+            placeholderId={placeholderSlug}
+            isDesigner={isDesigner}
+            isSelected={selectedSectionId === section.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onSelect={setSelectedSectionId}
+            onMoveUp={() =>
+              sendAction('MOVE_SECTION_UP', {
+                placeholderId: placeholderSlug,
+                sectionId: section.id
+              })
+            }
+            onMoveDown={() =>
+              sendAction('MOVE_SECTION_DOWN', {
+                placeholderId: placeholderSlug,
+                sectionId: section.id
+              })
+            }
+            onDuplicate={() =>
+              sendAction('DUPLICATE_SECTION', {
+                placeholderId: placeholderSlug,
+                sectionId: section.id
+              })
+            }
+            onToggleVisibility={() =>
+              sendAction('TOGGLE_SECTION_VISIBILITY', {
+                placeholderId: placeholderSlug,
+                sectionId: section.id
+              })
+            }
+            onDelete={() =>
+              sendAction('DELETE_SECTION', {
+                placeholderId: placeholderSlug,
+                sectionId: section.id
+              })
+            }
+            onRename={(newLabel) =>
+              sendAction('RENAME_SECTION', {
+                placeholderId: placeholderSlug,
+                sectionId: section.id,
+                label: newLabel
+              })
+            }
+          />
+        ))}
+    </div>
+  );
+}