UVE: Support #editContentlet Macro in Universal Visual Editor

[fmontes]

Problem Statement

The Universal Visual Editor (UVE) currently does not support the #editContentlet macro, which limits developers' ability to customize and edit contentlets within the editor.

Steps to Reproduce

1. Open the Universal Visual Editor.
2. Try to use the #editContentlet macro within the editor.
3. Notice that the macro is not recognized or supported by the editor.

Acceptance Criteria

TBD

External Links

N/A

Assumptions & Initiation Needs

• It is assumed that developers will need to utilize the #editContentlet macro for more dynamic content editing within the Universal Visual Editor.
• Initiation needs include updating the UVE codebase to recognize and support the #editContentlet macro.

Quality Assurance Notes & Workarounds

• Currently, developers can manually edit contentlets outside of the UVE to include the #editContentlet macro.

[mbiuki]

We also lost ability to reorder menus
@nollymar

[zJaaal]

We will take care of the reorder menu macro in this ticket #30445

[github-actions]

PRs:

• feat(uve): Support editContentlet custom action #30456
• fix(examples): Hide edit button outside editor #30657

[zJaaal]

Note to QA

Headless

Right now this is only implemented in NextJS. It should work in any framework, but if you don't want to go and modify the code. You can just run the NextJS example, go to the footer and you should see an small edit button in the contentlets of the footer. Be aware, that we didn't take in count any styles or hide/show functionality, we only want it to work in this iteration. It should pop the edit contentlet and also refresh the contentlet on save. We have another issue to create components for this button and enhance the visual funcionality, this ticket also cover the integration in other frameworks

Edit Button

Traditional

In order to see the correct button in the page, you can go to application/vtl/blog/blog-listing.vltdelete the code from line 32 to line 36 and add the macro with the inode of contentlet as arguments. It should look something like: #editContentlet($con.inode)

And then you can test the button on the blog listing page /blog/index.

Visual Reference

You should see a pencil above the contentlet, with no title and nothing else but a pencil

[rjvelazco]

Passed IQA

• Tested on docker image: [dotcms/dotcms:trunk_c0a01e6]

Traditional

30218-uve-support-editcontentlet-macro-in-universal-visual-editor-traditional.mov

Headless

30218-uve-support-editcontentlet-macro-in-universal-visual-editor-headless.mov

[bryanboza]

Fixed, tested on the Next JS and Angular SDK and now we are able to use this macro as expected.

Issue related to button UI was created here: #30534