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} />

The button renders as follows in normal / preview modes:

Normal mode button

However, in Experience Editor, the button renders as follows:

edit link in EE

edit text in EE

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>
    <a href="http://google.com" class="cta-btn__KaxBH" target="_blank" rel="noopener noreferrer" style="text-decoration: none;">
            <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>

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?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.