site-builder/craft/src/editor/RenderNode.tsx

import React, { useCallback, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { NodeElement, useEditor, useNode } from '@craftjs/core';
import { useDevice } from '../state/DeviceContext';
import { hasAnyOverride, hasActiveOverride, resolveStyleForDevice, type ResponsiveProps } from '../utils/responsive-style';

interface RenderNodeProps {
  render: React.ReactElement;
}

/**
 * Craft.js `<Editor onRender>` override -- wraps every node's render output.
 * For the currently-selected node it portals a floating badge (component
 * displayName + a "select parent" chevron) positioned over the node's real
 * DOM element. Non-selected nodes (the overwhelming majority) and ROOT pass
 * straight through as a Fragment, so this never touches layout, never
 * appears in `toHtml` export (that walks the Craft node tree, not this
 * portal), and doesn't wrap every node in extra DOM.
 *
 * It also imperatively tags each node's real DOM element with two
 * editor-only data attributes (never part of `toHtml` export, which walks
 * the Craft node tree, not the live DOM):
 *  - `data-craft-node`: set on actual Craft.js droppable containers
 *    (`node.data.isCanvas`, excluding ROOT). `editor.css`'s dashed "guide"
 *    outlines target this attribute instead of blanket tag selectors
 *    (div/section/header/...), so a component's own internal wrapper markup
 *    no longer picks up a guide outline it isn't a real drop target for.
 *  - `data-craft-hovered`: mirrors `node.events.hovered` (Craft's hover
 *    event set). Craft's own `connectors.connect()` (called by every
 *    component) wires a native mouseover/mouseleave listener to this event
 *    internally, so a plain mouse hover over any connected node sets it --
 *    this attribute is a real-mouse-hover canvas highlight. (The Layers
 *    panel's row-hover -> canvas-highlight sync, item 12, uses a sibling
 *    `data-layer-hovered` attribute written directly by LayersPanel.tsx
 *    instead of this event, since the action that would drive it here
 *    -- `actions.setNodeEvent` -- is stripped from the public `useEditor()`
 *    API at runtime.) editor.css matches both attributes for the same
 *    outline and suppresses both under `.guides-off`.
 *  - `data-wsb-overridden`: set while the current device mode (tablet/
 *    mobile, from DeviceContext) has per-breakpoint overrides for this node
 *    -- i.e. the canvas is showing something other than the desktop style.
 *    Counts only SET values (not ''/null placeholders), like export.
 *  - `data-hide-desktop|tablet|mobile` / `data-craft-selected` (#37): mirror
 *    the node's hide flags and selection for the device-emulation CSS.
 *
 * Per-breakpoint styles (#45/#37): when the device is not desktop and the
 * node carries `styleTablet`/`styleMobile`, this is the ONE place the
 * effective style is resolved (`resolveStyleForDevice`), so no component
 * needs to know about devices. Craft hands `onRender` an opaque
 * `<DefaultRender/>` element that reads the node's props itself, so the
 * override cannot be applied with `cloneElement(render, {style})` -- instead
 * the component element is rebuilt here exactly as Craft's DefaultRender
 * does (`createElement(type, props, <NodeElement/> children)`) with the
 * resolved `style`. Nodes without overrides, and every node on desktop,
 * keep Craft's own `render` untouched.
 */
export const RenderNode: React.FC<RenderNodeProps> = ({ render }) => {
  const { actions } = useEditor();
  const { device } = useDevice();
  const { id, isSelected, dom, name, parent, isCanvas, isHovered, overridden, hideDesktop, hideTablet, hideMobile } = useNode((node) => {
    // Keep the collector cheap: the node's type/props/children are only
    // collected for the (rare) nodes that actually carry overrides.
    const props = node.data.props as ResponsiveProps | undefined;
    const overridden = hasAnyOverride(props)
      ? { type: node.data.type, props: node.data.props, childIds: node.data.nodes }
      : null;
    return {
      isSelected: node.events.selected,
      isHovered: node.events.hovered,
      dom: node.dom,
      name: (node.data.custom?.label as string) || (node.data.props?.aiName as string) || node.data.displayName,
      parent: node.data.parent,
      isCanvas: node.data.isCanvas,
      overridden,
      hideDesktop: !!node.data.props?.hideOnDesktop,
      hideTablet: !!node.data.props?.hideOnTablet,
      hideMobile: !!node.data.props?.hideOnMobile,
    };
  });

  // Overrides that apply on the current device (mobile inherits tablet's).
  const activeOverride =
    !!overridden && hasActiveOverride(overridden.props as ResponsiveProps, device);

  const badgeRef = useRef<HTMLDivElement>(null);
  const active = isSelected && id !== 'ROOT' && !!dom;

  const updatePosition = useCallback(() => {
    if (!dom || !badgeRef.current) return;
    const rect = dom.getBoundingClientRect();
    const badgeHeight = 22;
    badgeRef.current.style.left = `${Math.max(rect.left, 0)}px`;
    badgeRef.current.style.top = `${Math.max(rect.top - badgeHeight, 0)}px`;
  }, [dom]);

  useEffect(() => {
    if (!active) return;
    updatePosition();
    window.addEventListener('resize', updatePosition);
    document.addEventListener('scroll', updatePosition, true);
    return () => {
      window.removeEventListener('resize', updatePosition);
      document.removeEventListener('scroll', updatePosition, true);
    };
  }, [active, updatePosition]);

  useEffect(() => {
    if (!dom) return;
    if (isCanvas && id !== 'ROOT') {
      dom.setAttribute('data-craft-node', '');
    } else {
      dom.removeAttribute('data-craft-node');
    }
  }, [dom, isCanvas, id]);

  useEffect(() => {
    if (!dom) return;
    if (isHovered) {
      dom.setAttribute('data-craft-hovered', '');
    } else {
      dom.removeAttribute('data-craft-hovered');
    }
  }, [dom, isHovered]);

  // #37: mirror the export's visibility flags and the selection onto the dom;
  // editor.css hides `[data-hide-<device>]` for the active device (the
  // viewport media queries cannot fire inside a narrowed frame) but keeps the
  // selected node visible (dimmed) so it stays editable.
  useEffect(() => {
    if (!dom) return;
    const flags: Array<[string, boolean]> = [
      ['data-hide-desktop', hideDesktop],
      ['data-hide-tablet', hideTablet],
      ['data-hide-mobile', hideMobile],
      ['data-craft-selected', isSelected],
    ];
    for (const [attr, on] of flags) {
      if (on) dom.setAttribute(attr, '');
      else dom.removeAttribute(attr);
    }
  }, [dom, hideDesktop, hideTablet, hideMobile, isSelected]);

  useEffect(() => {
    if (!dom) return;
    if (activeOverride) {
      dom.setAttribute('data-wsb-overridden', '');
    } else {
      dom.removeAttribute('data-wsb-overridden');
    }
  }, [dom, activeOverride]);

  let output: React.ReactElement = render;
  // String-typed (plain DOM) nodes go through Craft's own SimpleElement
  // connector wrapper, which is not exported -- leave those untouched. Every
  // resolver component is a React component, so this only skips raw tags.
  if (device !== 'desktop' && overridden && typeof overridden.type !== 'string') {
    const { type, props, childIds } = overridden;
    const children =
      childIds && childIds.length > 0 ? (
        <>
          {childIds.map((childId: string) => (
            <NodeElement id={childId} key={childId} />
          ))}
        </>
      ) : (
        props.children
      );
    output = React.createElement(
      type as React.ElementType,
      { ...props, style: resolveStyleForDevice(props as ResponsiveProps, device) },
      children,
    );
  }

  if (!active) return <>{output}</>;

  return (
    <>
      {output}
      {createPortal(
        <div ref={badgeRef} className="component-indicator" style={{ position: 'fixed' }}>
          <span>{name}</span>
          {parent && (
            <button
              type="button"
              className="component-indicator-parent-btn"
              title="Select parent"
              aria-label={`Select parent of ${name}`}
              onMouseDown={(e) => {
                e.stopPropagation();
                actions.selectNode(parent);
              }}
            >
              <i className="fa fa-chevron-up" aria-hidden />
            </button>
          )}
        </div>,
        document.body
      )}
    </>
  );
};