AEM UI extensions - CF editor - RTE

[Reyn_]

Hi all,

I'm currently working on an UI extension for the RTE in the new Content Fragment editor. I'm doing this based on the documentation provided here: Rich Text Editor Toolbar - AEM Content Fragments Editor Extensibility and also based on the examples provided here: GitHub - adobe/aem-uix-examples: List of examples for UI Extensibility of AEM.

I'm left with 2 questions:

1. Is it possible to get the cursor location on click? Currently we are depending on the full selection of a link + 1 character. Otherwise the state.selectedHtml does not contain the <a> tag. 
2. Is it possible to highlight the button icon? When clicked on a link in the RTE, the link button is being highlighted, when moving the cursor away it returns to the original stage. We would like to add similar functionality to our custom button.

The goal is to have a button that can set a custom value on the target attribute of the <a> tag. It would be nice if we could add an option in the exisiting link modal, but I couldn't find any documentation on this being possible.

Thanks in advance,

Reyn

[Karishma_begumSh]

Hi @Reyn_ 

1.You can’t get the exact cursor position via the RTE API, but you can detect if the cursor is inside a link using:

const sel = window.getSelection();
const anchor = sel?.anchorNode?.closest?.('a');
if (anchor) {
  // Cursor is inside a link
}

Works if the RTE isn't in a shadow DOM or iframe.

state.selectedHtml only helps when a link is fully or partially selected.

2.Yes, you can highlight your custom button by setting isActive:

isActive: () => {
  const sel = window.getSelection();
  return sel?.anchorNode?.closest?.('a');
}

You can't extend the default link modal in AEM RTE.

Instead, open your modal in execute()

execute: () => {
  const sel = window.getSelection();
  const anchor = sel?.anchorNode?.closest?.('a');
  if (anchor) {
    anchor.setAttribute('target', '_custom');
  }
}

Hope this helpful:)

Regards,

Karishma.

[Reyn_]

All the UI extensions run inside an Iframe. This makes it not possible to use window.getSelection(). As the window is your application and the cursor is on experience.adobe.com.

isActive property doesn't work either on the getCustomButtons. 

So this does not work unfortunately.

Kind regards,

Reyn

[kautuk_sahni]

@Reyn_ Just checking in — were you able to resolve your issue? We’d love to hear how things worked out.If you found the solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!

[Reyn_ · Accepted solution]

@kautuk_sahni 
Unfortunately there is no way currently to achieve the above. 

The solution we came up with is to completely replace the RTE in the new Content fragment editor based on the example provided here: aem-uix-examples/cf-editor-custom-rte-field at main · adobe/aem-uix-examples · GitHub

This solution is definitely overkill for us and makes all the UI extensions points for the RTE more or less useless. 

[kautuk_sahni]

@Reyn_ You may want to consider submitting this as a feature request in the AEM Community's Ideas section.