Improve and upgrade TinyMCE Editor

[prathamVaidya]

What this PR does

This PR focuses on enhancing the TinyMCE editor by upgrading it to the latest version and refining the user interface to create a more modern and minimalistic design.

Changes

• upgraded to 7.0
• inline to classic mode
• changes to editor options
• removed menubar

Screenshots

Before:

After upgrading to v7 and moving to classic from inline:

[prathamVaidya]

@ragesoss The current Editor looks very cluttered to me with a lot of unused options. What do you think about removing or regrouping the extra options to make it more modern and minimal?

Something more like this:

Also, Why are we using inline mode, is there a reason to use it over the classic mode?
Classic mode gives more multiline editing space.

[ragesoss]

This looks like potentially a nice improvement. I'm not sure why we use inline mode instead of classic, and I don't object to making a change. I assume all the advanced options are still available via the three dots? It's important to retain the option to edit in source mode.

[prathamVaidya]

This looks like potentially a nice improvement. I'm not sure why we use inline mode instead of classic, and I don't object to making a change. I assume all the advanced options are still available via the three dots? It's important to retain the option to edit in source mode.

Yes all options can be available. I'll add the source editing also.

[prathamVaidya]

Hi @ragesoss, I have created a new plugin for tinyMCE editor to edit source code using a full code editor for wikiEduDashboard. It's like a better version of the original code plugin with improved UI/UX.

Here is a demo showing difference between both:

screen-recording-2024-04-06-01.12.webm

Under the hood its using Ace Editor so we can get :

• syntax-highlighting
• code linting
• auto-closing
• auto-completion (optional)

I have also exposed transformation functions that can be used to support source editing in any language, like markdown or wikitext by passing their parser, so basically it can make TinyMCE work like a visual markdown editor with source code editing.

Try Demo

Plugin Github: https://github.com/prathamVaidya/supercode-tinymce-plugin