[5.0] TinyMCE highlighter plugin with CodeMirror 6

[Fedik]

Pull Request for Issue #41278 .

Summary of Changes

(Re)Writing a plugin for TinyMCE code highlighting with CodeMirror 6.

Testing Instructions

Apply patch, run npm install.
Enable "code highlighting" in TinyMCE plugin parameters.
Open article editing and check that "code highlighting" is working

Actual result BEFORE applying this Pull Request

working

Expected result AFTER applying this Pull Request

working

Link to documentations

Please select:

• Documentation link for docs.joomla.org:
• No documentation changes for docs.joomla.org needed
• Pull Request link for manual.joomla.org:
• No documentation changes for manual.joomla.org needed

[dgrammatiko]

@Fedik wasn't the reason that the original version used an iframe to not interfere with the tinyMCE styles?

Anyways, you could wrap the textarea into a web component with a slot (with Shadow DOM) to overcome the styling problem...

[Fedik]

wasn't the reason that the original version used an iframe to not interfere with the tinyMCE styles?

I think it was more about avoid of loading codemirror scripts and styles, on initila load. But maybe also this.

web component with a slot (with Shadow DOM) to overcome the styling problem

That what I want to avoid: shadow dom and iframe :)
It has own limitation. In any case will see, in the end can be on of that.
Also we can use own dialog #40150

[Fedik]

This is ready for testing

[HLeithner]

@brianteeman you may have time tomorrow for a quick look?

[HLeithner]

it works for me but looks different then 4.4 version right?

[HLeithner]

4.4

this pr:

shortcuts are working but a bit hard to know if they are not listed anywhere

[brianteeman]

1. Agree with @HLeithner about it missing the legends for search
2. Needs code to remove the old plugin
3. The tab key is not usable in the editor (it was in j43)
4. Using the tab key the focus is not trapped in the modal. As a result you can tab away from the modal and it will stay open and youn cannot close it (a11y)

[Fedik]

@HLeithner you forgot to enable "Source Code Highlighting" in plugin parameters.

missing the legends for search

It is gone, forever, sorry.

The tab key is not usable in the editor (it was in j43)

It is general behavior of codemirror 6, check codemirror/dev#238 Quote:

This is by design, since tab is an essential part of keyboard web navigation, and trapping it harms accessibility.

It can be coded to work, but do we need it?

Using the tab key the focus is not trapped in the modal

Hmhm, this is working with default "Source view" of TinyMCE.
Probably something with codemirror 6 and tab handling in general.
Need to look.

[HLeithner]

I'm merging this for now, but the tab issues is a bit annoying, I have read suggestions like key combination ESC and then TAB to escape from the editor area. Which sounds good to me.

[brianteeman]

The accessibility issue really must be fixed before merge

[Fedik]

I'm merging this for now

Do not hurry, it is not that important feature, and it is optional anyway.
I will look in to tab thing some time, this or next week.

The tab escaping the modal is easy to fix with dialog modal (#40150), the browser automatically prevents the focus to leave the dialog.
But I think it also can be fixed when enable Codemirror to trap the tab, as it done in 4.x

[dgrammatiko]

@Fedik just switch to the Joomla modal and ask @HLeithner to finally merge that PR...

[Fedik]

I will never get into the editor again

At this point TinyMCE trap the tab.

[HLeithner]

I will never get into the editor again

At this point TinyMCE trap the tab.

I'm still in the modal and can tab between 3 modal buttons but can't get back into CM

[Fedik]

I'm still in the modal and can tab between 3 modal buttons but can't get back into CM

That what I meant, TinyMCE "tab trap" does not allow for the focus to go in to content, in some reason.

I replaced one bug with annother.
New one probably better one 😄

[HLeithner]

but at this point in time tinymce isn't in charge of doing anything or?

[Fedik]

but at this point in time tinymce isn't in charge of doing anything or?

It is, the modal is from tinymce API, it have a feature to "trap the tab", to avoind a bug when tab goes under the modal.
when you push shift+tab, the code changes the focus from codemirror to save/cancel button of tinymce, and it is stuck there,

[HLeithner]

ok, now I understand, can this be solved with your own modal #40150 ?

[Fedik]

yeap, I tried a quick test, it is working.
Can do like this, if you like: you can merge current PR, at least it is usable.
I plan a litle changes for #40150, then it also can be merged.
After that I can update the codemirror + tinymce to use our dialog instead of tinymce.

[HLeithner]

Ok then I merge this for now, even if it's not optimal and hope that with #40150 we get a proper working interface.

thanks