Extend a Text Component in React AEM SPA

[iamnjain]

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
    @Via(type = ResourceSuperType.class)
    private Text text;


    @Override
    public String getResourceType() {
        return RESOURCE_TYPE;
    }

    @Override
    public String getText() {
        return text.getText();
    }

    @Override
    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?

[iamnjain · Accepted solution]

Hello,

I am able to resolve this, by tweaking Sling Model.

1. Instead of extending Text core component model in Custom Text component Interface, extended with ComponentExporter.