Edit Contentlet: Allow User to Toggle Between WYSIWYG and Code Field

[fmontes]

Parent

#25445

Task description

As a dotCMS user, I want to be able to switch between the WYSIWYG editor and the code editor in the content editing field, so that I can have more flexibility in how I input and edit content.

Acceptance Criteria

Users should be able to seamlessly switch between the WYSIWYG editor (tinymce) and the code editor (monaco editor) in the content editing field. The content should be retained and displayed correctly in both editor modes.

External Links

OLD Editor

New Editor

Assumptions & Initiation Needs

• Users are familiar with both the WYSIWYG editor and the code editor.
• The toggle button or option to switch between editors will be located within the content editing field for easy access.

Quality Assurance Notes & Workarounds

N/A

Sub-Tasks & Estimates

N/A

[dsilvam]

Failed IQA:

We need to keep these two behaviors from the old Content Edit Screen:

1. In the old Edit Content Screen we used to remember the selected mode, meaning if you chose "Code", then closed and re-opened the Edit Content, you'd be in "Code" mode again. Now we are always defaulting to WYSIWYG (no-code) mode regardless of the previous selection.
2. Also in the old Edit Content Screen when switching from "Code" to "WYSIWYG" we used to show the following message because in fact your code can loose format when switching to WYSIWYG and then coming back to "Code". We're not showing anything upon performing the same switching in the new Content Edit

[oidacra]

Notes to QA: Monaco Editor Integration

Custom Configuration

• Test monacoOptions properties to ensure users can custom-config the editor
  

Editor Selection and Language

• When Code is selected:
  • Verify that the language selection dropdown appears
  • Ensure the dropdown is populated with correct language options

Content Persistence

• Save content and reopen:
  • Verify the proper editor (TinyMCE/Monaco) is displayed
  • For Code content, check if the correct language is preselected in the dropdown

Editor Switching

• If the editor has content, changing the editor should:
  • Trigger a confirmation dialog
  • Verify the dialog appears and warns about potential content changes

Language Support

• Test language selection functionality
• Verify syntax highlighting works correctly for various programming languages

@josemejias11 @dsilvam

[dsilvam]

Failed IQA:

• When you have multiple Wysiwyg fields and switch between Wysiwyg and Code, the popup is displayed three times, one for each of the fields instead only for the field being modified.
• We should not show the popup when switching from Wysiwyg to Code but only from Code to Wysiwyg.
• If you have more than one Wysiwyg field, it will remember the selection only for the first one.
• Remove the "HTML" word from the message in the popup

[oidacra]

When you have multiple Wysiwyg fields and switch between Wysiwyg and Code, the popup is displayed three times, one for each of the fields instead only for the field being modified ✅

We should not show the popup when switching from Wysiwyg to Code but only from Code to Wysiwyg. ✅

If you have more than one Wysiwyg field, it will remember the selection only for the first one.
Not reproducible

Remove the "HTML" word from the message in the popup ✅

[dsilvam]

Passed IQA:
All the reported issues are now fixed.

[josemejias11]

Approved: Tested on trunk_324de85, Docker, macOS 14.5, FF v126.0.1