Imagine we have a link field ctaLink
and a text field ctaText
which are rendered as follows:
<div className={styles['cta']}>
<Link field={fields?.ctaLink as LinkField} className={styles['cta-btn']}>
<Text field={fields?.ctaText} />
</Link>
</div>
The button renders as follows in normal / preview modes:
However, in Experience Editor, the button renders as follows:
I have these requirements:
- I don't want the link target to appear at all
- Should be able to click text content to edit inline (already works)
- Should be able to click the area around the text to trigger the popup to edit the link field
The problem is that the link and text fields render as siblings in EE instead of the structure that has been defined:
<div class="cta__3u1nY">
<span class="cta-btn__KaxBH" style="">
<code id="fld_E4C6648F77424ADAA7AF340C2FAB05A2_9352C7A1E3524FDB8C58FBE7E12C6056_en_1_d844d2f00c024682bcfc1c605c23fbf2_3310_edit" type="text/sitecore" chrometype="field" scfieldtype="general link" class="scpm" kind="open">...</code>
<a rel="noopener noreferrer" href="http://google.com" target="_blank" sc-part-of="field" class="scEnabledChrome" style="">http://google.com</a>
<code class="scpm" type="text/sitecore" chrometype="field" kind="close"></code>
</span>
<a href="http://google.com" class="cta-btn__KaxBH" target="_blank" rel="noopener noreferrer" style="text-decoration: none;">
<span>
<span class="scChromeData">...</span>
<span id="fld_E4C6648F77424ADAA7AF340C2FAB05A2_E373F05114804F3C9B68DE7F98407E15_en_1_d844d2f00c024682bcfc1c605c23fbf2_3309_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput scEnabledChrome" scfieldtype="single-line text" scdefaulttext="CTA Text: [No text in field]" sc-part-of="field">READ MORE</span>
</span>
</a>
</div>
Ostensibly this is related to this comment in the JSS code, whereby JSS will, in such cases, render the fields as siblings. It also states that a custom helper will be required.
What would this helper look like?