search

WikiEducationFoundation / WikiEduDashboard

Wiki Education Foundation's Wikipedia course dashboard system
https://dashboard.wikiedu.org
MIT License
387 stars 617 forks source link

Improve and upgrade TinyMCE Editor #5746

Open prathamVaidya opened 6 months ago

prathamVaidya commented 6 months ago

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

Screenshots

Before:

image

After upgrading to v7 and moving to classic from inline:

image

prathamVaidya commented 6 months ago

@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:

image

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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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 :

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