Solved
Extend a Text Component in React AEM SPA
Hello Folks,
I am trying to extend Text core component and want to add additional pulgins in RTE.
So, I did it using Adobe recommended approach as below,
My Component content xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
jcr:primaryType="cq:Component"
jcr:title="Custom Text"
sling:resourceSuperType="core/wcm/components/text/v2/text"
componentGroup="My Project - Content"/>
I have created a mapping in React under ui.frontend folder import-components.js file
const TestPropsEditConfig1 = {
emptyLabel: "Custom Text",
isEmpty: (props) => {
return !props;
},
};
MapTo("myproject/components/customtext")(TestProps1, TestPropsEditConfig1);
Then I extended Sling model using Sling Delegation pattern
public interface CustomText extends Text {
}
Impl class:
@Model(
adaptables = SlingHttpServletRequest.class,
adapters = { CustomText.class, ComponentExporter.class },
resourceType = CustomTextImpl.RESOURCE_TYPE,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)
public class CustomTextImpl implements CustomText{
static final String RESOURCE_TYPE = "myproject/components/customtext";
@Self
@2434638(type = ResourceSuperType.class)
private Text text;
@9944223
public String getResourceType() {
return RESOURCE_TYPE;
}
@9944223
public String getText() {
return text.getText();
}
@9944223
public boolean isRichText() {
return text.isRichText();
}
}
I have extended lots of core components in past, never faced this issue.
The main issue with above implementation is, when I drag and drop the component on page, It should render empty dialog field text from config and author should able to configure.
But, nothing appears on Page after drag and drop.
What could be the reason, please help?