ui-dev-content/dist/components/EditableContent.js

import { jsx as _jsx } from "react/jsx-runtime";
/**
 * EditableContent - Wrapper component for marking content as editable
 *
 * This is the primary API for feature developers to mark content as editable.
 * It automatically registers with the overlay in dev mode.
 */
import { useEffect, useRef } from 'react';
import { useContentRegistry } from '../core/ContentEditingContext';
/**
 * Wrapper component that marks content as editable
 *
 * @example
 * ```tsx
 * <EditableContent source="locale" identifier="home.hero.title">
 *   {t('hero.title')}
 * </EditableContent>
 * ```
 */
export function EditableContent({ source, identifier, type = 'text', transformers, children, className, as: Component = 'div', }) {
    const ref = useRef(null);
    const registry = useContentRegistry();
    useEffect(() => {
        // Only register in development mode and when provider is available
        if (!import.meta.env.DEV || !ref.current || !registry) {
            return;
        }
        // Add data attributes for detection
        ref.current.dataset.editable = 'true';
        ref.current.dataset.contentSource = source;
        ref.current.dataset.contentId = identifier;
        ref.current.dataset.contentType = type;
        if (transformers) {
            ref.current.dataset.allowedTransformers = transformers.join(',');
        }
        // Trigger a re-scan
        // This will cause the overlay to pick up this element
        const rescan = async () => {
            await registry.detectContent();
        };
        rescan();
        return () => {
            // Cleanup: remove data attributes
            if (ref.current) {
                delete ref.current.dataset.editable;
                delete ref.current.dataset.contentSource;
                delete ref.current.dataset.contentId;
                delete ref.current.dataset.contentType;
                delete ref.current.dataset.allowedTransformers;
            }
        };
    }, [source, identifier, type, transformers, registry]);
    return (_jsx(Component, { ref: ref, className: className, children: children }));
}