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

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

@@ -1,218 +0,0 @@
-'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>
-  );
-}