편집 가능한 고정 구성 요소

import React from 'react'
import { RoutedLink } from "./RoutedLink";

const TitleLink = (props) => {
return (
    <RoutedLink className={props.baseCssClass + (props.nested ? '-' : '__') + 'link'}
        isRouted={props.routed}
        to={props.linkURL}>
    {props.text}
    </RoutedLink>
);
};

const TitleV2Contents = (props) => {
    if (!props.linkDisabled) {
        return <TitleLink {...props} />
    }

    return <>{props.text}</>
};

export const Title = (props) => {
    if (!props.baseCssClass) {
        props.baseCssClass = 'cmp-title'
    }

    const elementType = (!!props.type) ? props.type.toString() : 'h3';
    return (<div className={props.baseCssClass}>
        {
            React.createElement(elementType, {
                    className: props.baseCssClass + (props.nested ? '-' : '__') + 'text',
                },
                <TitleV2Contents {...props} />
            )
        }

        </div>)
}

export const titleIsEmpty = (props) => props.text == null || props.text.trim().length === 0

// Import the withMappable API provided bu the AEM SPA Editor JS SDK
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import React from 'react'

// Import the AEM the Title component implementation and it's Empty Function
import { Title, titleIsEmpty } from "./core/Title";
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

// The sling:resourceType of the AEM component used to collected and serialize the data this React component displays
const RESOURCE_TYPE = "wknd-app/components/title";

// Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
const EditConfig = {
    emptyLabel: "Title",        // The component placeholder in AEM SPA Editor
    isEmpty: titleIsEmpty,      // The function to determine if this component has been authored
    resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
};

export const WrappedTitle = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Title, "cmp-title"), titleIsEmpty, "TitleV2")
    return <Wrapped {...props} />
}

// EditableComponent makes the component editable by the AEM editor, either rendered statically or in a container
const EditableTitle = (props) => <EditableComponent config={EditConfig} {...props}><WrappedTitle /></EditableComponent>

// MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
MapTo(RESOURCE_TYPE)(EditableTitle);

export default EditableTitle;

...
import EditableTitle from './editable/EditableTitle';
...
function Home() {
    return (
        <div className="Home">

        <EditableTitle
            pagePath='/content/wknd-app/us/en/home'
            itemPath='root/title'/>

            <Adventures />
        </div>
    );
}