I am unable to create composite component in SPA
I am trying the link below. If anyone has any example composite component please do share
https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa...
I have Image component
import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';
import { withMappable } from '@adobe/aem-react-editable-components';
require('./Image.css');
export const ImageEditConfig = {
emptyLabel: 'Image',
isEmpty: function(props) {
return !props || !props.src || props.src.trim().length < 1;
}
};
export default class Image extends Component {
get content() {
return <img className="Image-src"
src={this.props.src}
alt={this.props.alt}
title={this.props.title ? this.props.title : this.props.alt} />;
}
render() {
if(ImageEditConfig.isEmpty(this.props)) {
return null;
}
return (
<div className="Image">
{this.content}
</div>
);
}
}
export const AEMImage = withMappable(Image, ImageEditConfig);
Text Component
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2020 Adobe Systems Incorporated
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import sanitizeHtml from 'sanitize-html';
import sanitizeWhiteList from '../sanitize-html.whitelist';
import React, { Component } from 'react';
import extractModelId from '../../utils/extract-model-id';
import { withMappable } from '@adobe/aem-react-editable-components';
require('./Text.css');
const TextEditConfig = {
emptyLabel: 'Text',
isEmpty: function (props) {
return !props || !props.text || props.text.trim().length < 1;
}
};
/**
* Text React component
*/
class Text extends Component {
get richTextContent() {
return (
<div
id={extractModelId(this.props.cqPath)}
data-rte-editelement
dangerouslySetInnerHTML={{
__html: sanitizeHtml(this.props.text, sanitizeWhiteList)
}}
/>
);
}
get textContent() {
return <div>{this.props.text}</div>;
}
render() {
return this.props.richText ? this.richTextContent : this.textContent;
}
}
export default Text;
//export const AEMText = withMappable(Text, TextEditConfig);
On their own they are working fine but when I wrap them within my Composite component it fails
import React from 'react';
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
import Text from '../Text/Text';
const ImageCard = () => {
return (
<Text/>
);
};
export default withMappable(ImageCard);
MapTo('wknd-spa-react/components/imagecard')(ImageCard);
Please help me