Pass data to Universal Editor extension

[RainyFe]

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.

[partyush]

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

[RainyFe]

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]

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.

[RainyFe]

Hi @partyush. I've tried it and I wrote in the previous comment that I'm getting null for element. You should give it a try and check that comment
How did this work for you considering extension's document object is in its own iFrame and we cannot access document, where html with component's markup resides, from the extension.