檢測 React 應用程式以使用通用編輯器編輯內容

$ npm install react-helmet-async

...
import { Helmet, HelmetProvider } from "react-helmet-async";

function App() {
return (
    <HelmetProvider>
        <div className="App">
            <Helmet>
                {/* AEM Universal Editor :: CORE Library
                  Loads the LATEST Universal Editor library
                */}
                <script
                    src="https://universal-editor-service.adobe.io/cors.js"
                    async
                />
            </Helmet>
            <Router>
                <header>
                    <Link to={"/"}>
                    <img src={logo} className="logo" alt="WKND Logo" />
                    </Link>
                    <hr />
                </header>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/person/:fullName" element={<Person />} />
                </Routes>
            </Router>
        </div>
    </HelmetProvider>
);
}

export default App;

...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    return (
        <div className="team">
            // AEM Universal Editor :: Instrumentation using data-aue-* attributes
            <h2 className="team__title" data-aue-prop="title" data-aue-type="text" data-aue-label="title">{title}</h2>
            <p className="team__description" data-aue-prop="description" data-aue-type="richtext" data-aue-label="description">{description.plaintext}</p>
            ...
        </div>
    );
}

export default Teams;

...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    // Render single Team
    function Team({ _path, title, shortName, description, teamMembers }) {
        // Must have title, shortName and at least 1 team member
        if (!_path || !title || !shortName || !teamMembers) {
            return null;
        }

      return (
        // AEM Universal Editor :: Instrumentation using data-aue-* attributes
        <div className="team" data-aue-resource={`urn:aemconnection:${_path}/jcr:content/data/master`} data-aue-type="reference" data-aue-label={title}>
        ...
        </div>
    );
    }
}
export default Teams;

...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    <div>
        <h4 className="team__members-title">Members</h4>
        <ul className="team__members">
            {/* Render the referenced Person models associated with the team */}
            {teamMembers.map((teamMember, index) => {
                return (
                    // AEM Universal Editor :: Instrumentation using data-aue-* attributes
                    <li key={index} className="team__member" data-aue-resource={`urn:aemconnection:${teamMember?._path}/jcr:content/data/master`} data-aue-type="component" data-aue-label={teamMember.fullName}>
                    <Link to={`/person/${teamMember.fullName}`}>
                        {teamMember.fullName}
                    </Link>
                    </li>
                );
            })}
        </ul>
    </div>
    ...
}
export default Teams;

{
    "groups": [
        {
        "title": "Content Fragments",
        "id": "content-fragments",
        "components": [
            {
            "title": "Person",
            "id": "person",
            "plugins": {
                "aem": {
                    "cf": {
                        "name": "person",
                        "cfModel": "/conf/my-project/settings/dam/cfm/models/person",
                        "cfFolder": "/content/dam/my-project/en",
                        "title": "person",
                        "template": {
                            "fullName": "New Person",
                            "biographyText": "This is biography of new person"
                            }
                        }
                    }
                }
            }
        ]
        }
    ]
}

...
<script
    type="application/vnd.adobe.aue.component+json"
    src="/static/component-definition.json"
></script>
<title>WKND App - Basic GraphQL Tutorial</title>
</head>
...

...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    {/* AEM Universal Editor :: Team Members as container */}
    <div data-aue-prop="teamMembers" data-aue-type="container" data-aue-label="members">
        <h4 className="team__members-title">Members</h4>
        <ul className="team__members">
        {/* Render the referenced Person models associated with the team */}
        {teamMembers.map((teamMember, index) => {
            return (
            // AEM Universal Editor :: Instrumentation using data-aue-* attributes
            <li key={index} className="team__member" data-aue-resource={`urn:aemconnection:${teamMember?._path}/jcr:content/data/master`} data-aue-type="component" data-aue-label={teamMember.fullName}>
                <Link to={`/person/${teamMember.fullName}`}>
                {teamMember.fullName}
                </Link>
            </li>
            );
        })}
        </ul>
    </div>
    ...
}
export default Teams;