Pass data to Universal Editor extension | Community
Skip to main content
R
RainyFe
July 3, 2025
Question

Pass data to Universal Editor extension

  • July 3, 2025
  • 1 reply
  • 733 views

There is a bunch of data-aue attributes that we can retrieve in custom Universal Edtitor extenstion. For example given html markup like this

<div class="MuiBox-root mui-ifmqwy" data-aue-resource="<resource_path>" data-aue-model="myapp-component-model" data-aue-label="Component Label" data-aue-type="component" data-aue-prop="<some_prop>"></div>

We can obtain attributes values using editorState.editables obejct in custom UE extension

const editorState = await guestConnection.host.editorState.get(); let editable = editorState.editables[0]; console.log('editable: ', editable) // outputs { "id": "<some_id>", "type": "component", "resource": "<resource_path>", "prop": "<some_prop>", "rect": {}, "label": "Component Label", "parentid": "<parent_id>", "selector": "<some_selector>", "isComponent": true, "model": "myapp-component-model", "filter": "", "component": "", "content": "", "children": [] }

For example "prop" value comes from data-aue-prop , "type" - from data-aue-type and so on.

I've tried using data-aue-prop to pass some arbitrary data and it worked but it makes UE think this component is a Content Fragment so it becomes undeletable, unduplicatable

My actual question is - can we use data-aue-component attribute to pass some arbitrary data to extension? Actually it worked for me but this attribute is not documented anywhere so I cannot be sure it won't affect some implicit logic in future. Or if not what are the other ways to pass the data from html to the extenstion?

Everything I know about data-aue-component attribute is that it was added in Release 19352

Quote from https://experienceleague.adobe.com/

SITES-27789: Support of data attribute data-aue-component in the DOM.

1 reply

partyush
Community Advisor
partyushCommunity Advisor
Community Advisor
July 3, 2025

Hi @rainyfe 

 

For this type you can use a custom data attribute like data-extension-custom and access it via the DOM with editable.selector. This method:

  • Avoids UE interference.
  • Doesn’t rely on undocumented features.
  • Requires no content model changes.
  • Is future-proof as long as DOM access remains supported.

     

For example

<div class="MuiBox-root mui-ifmqwy" data-aue-resource="<resource_path>" data-aue-model="myapp-component-model" data-aue-label="Component Label" data-aue-type="component" data-extension-custom="some_value"></div>​

 

Extension Code:

const editorState = await guestConnection.host.editorState.get(); const editable = editorState.editables[0]; const element = document.querySelector(editable.selector); if (element) { const customData = element.getAttribute('data-extension-custom'); console.log('Custom Data:', customData); // "some_value" // Proceed with customData } else { console.warn('Element not found for selector:', editable.selector); }


Thanks

    R
    RainyFeAuthor
    July 3, 2025

    Hi, @partyush. Thank you for spending some time answering this. Can you tell me if you have tried it or this is just an LLM's answer? Because document with component's html and document that we access in the extension are not the same documents, that's why I'm getting null for element

    partyush
    Community Advisor
    partyushCommunity Advisor
    Community Advisor
    July 4, 2025

    Hi @rainyfe 

     

    This is not an LLM-generated answer. Also, this is a normal JavaScript snippet  you should give it a try and check. I encountered something similar a few months ago, and this approach worked for me.


    Thanks.

    Terms & ConditionsAccessibility statement

    Loading footer...