Edit Contentlet: Add TinyMCE V6 WYSIWFY field to the form

[rjvelazco]

Parent Issue

#25445

Task

Implement the TinyMCE V6 to add the WYSIWFY field to the form.

Proposed Objective

Core Features

Proposed Priority

Priority 3 - Average

Acceptance Criteria

• All plugins available on the old WYSIWYG field should work on the new field.
• The user should not lose the content when updating it to the new one.

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

Here is the list of plugins that are supported in the TinyMCE v6: #27519 (comment)

Assumptions & Initiation Needs

Docs:

1. Install TinyMCE V6 in Angular (MIT License)
2. Plugins

Quality Assurance Notes & Workarounds

The custom plugins that were developed in dotCMS for TinyMCE will be migrated to Angular in a separate ticket.

Sub-Tasks & Estimates

No response

[fmontes]

[rjvelazco]

QA Note:

Remember that this field belongs to the new edit content. In order to see the new field you need to:

1. Enable the following feature flags:

"DOT_CONTENT_EDITOR2_CONTENT_TYPE":"*"
"DOT_CONTENT_EDITOR2_ENABLED": true

2. Enable the new edit content for the contentType:

[jcastro-dotcms]

INTERNAL QA: PASSED

• Docker Image: master_latest_SNAPSHOT

The WYSIWYG field is showing up correctly in the new Edit Mode. Just make sure that the new UI in the WYSIWYG looks as specified by Freddy in his comment above.

IMPORTANT: Some options from the previous UI, such as the strikethrough, underscore, adding links, anchors, etc. will be included in the new version in the future. They're out of scope for now.

[josemejias11]

Approved: Tested on dotcms-qa-master.dotcms, Docker, macOS 13.0, FF v121.0.1