Support color-scheme globally

[dgrammatiko]

So I'm doing some work on laying the foundations for globally supporting color-schemes (ie, dark/light mode).

Prerequisites:

• Bootstrap 5.3+
• tinyMCE 6+
• codemirror 6+
• A globally accepted attribute on the HTMLElement like data-theme with 2 possible values light or dark. This would be the convention for many apps that would need to render client side (tinyMCE, MediaManager, etc) so they all work in harmony. This should be part of the API going forward, so pick wisely!

To minimise the work needed I propose to change the way MediaManager is rendered, so from light DOM to render it in a WebComponent taking advantage of the Shadow DOM. This has the benefit that media manager would be decoupled from ANY template as it will have all the ingredients needed encapsulated. If this get's an approval work should be done with the assumption that BS5.3 will have accepted twbs/bootstrap#37162 (they seem to support it)

I will update this with preliminary work so people could provide feedback and have some checks and balances that we're doing things correctly.

There's an early preview: #39400

[crystalenka]

I am strongly against this.

We really need to be reducing, not adding, the number of web components used in Joomla. Very few contributors are comfortable working with or maintaining them and it does not make sense to use Javascript rendering in a PHP-based CMS.

It may be reducing the work you have to do now, but it drastically increases the work others will have to do in the future, and I do not believe it is really for any benefit beyond the immediate.

[brianteeman]

in this specific case I cannot agree - media manager is already written in js that no one knows - what is the harm in adding more js that no one knows

[dgrammatiko]

@crystalenka probably you misunderstood what I wrote about the media manager to be done as a web component: it's like 4 lines change on the app itself and then few more on the build tools, eg https://vuejs.org/guide/extras/web-components.html#sfc-as-custom-element But I guess you're missing my point

We really need to be reducing, not adding, the number of web components used in Joomla.

Strongly disagree for many reasons, WebComponents ARE the platform (eg ARE the WEB) and they provide some great conveniences like: lifecycle events, encapsulation, etc.

[crystalenka]

I am not misunderstanding the changes necessary nor am I missing your point. I'm well aware of how web components work.

I am saying that because web components are part of the build process, they are de facto harder to maintain and also critically, not easily extensible by third parties (in Joomla community).

As Brian mentioned, we are already seeing this difficulty with the main media manager—it is near-impossible to maintain because no one is willing to touch it save for a select few. We cannot make Joomla development more inaccessible for the contributors we have. We do not have Vue developers. We have PHP developers. That's not a bad thing. Joomla is not a Vue project. That's not a bad thing. Do not shove a square peg into a round hole.

Web components are a FANTASTIC tool for situations when you need neatly bundled, super-consistent UI elements, especially when they are already JS apps. They're great! Intranets, specific design systems, etc make great use of them to keep their UIs consistent.

That is not Joomla's use case by any stretch of the imagination, because Joomla is extensible and flexible and web components by definition are not.

[dgrammatiko]

I am saying that because web components are part of the build process, they are de facto harder to maintain and also critically, not easily extensible by third parties

Web components are in the same loop as any other JS (ES2015+) so in that sense they're not special in any extend. I'm curious though to understand what you mean that they're not extensible, in what sense? Customising their appearance, adding different logic or something else?

I am not misunderstanding the changes necessary nor am I missing your point. I'm well aware of how web components work.

But you are and then again I don't want to fight over this I will just change whatever needs to changed and keep the MM a Bootstrap only app.