Feature NPM Resource Changed bug PR-5.0-dev Pending

User tests: Successful: Unsuccessful:

avatar Fedik
Fedik
31 Jul 2023

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
56e4ce9 31 Jul 2023 avatar Fedik fixes
avatar joomla-cms-bot joomla-cms-bot - change - 31 Jul 2023
Category JavaScript Repository NPM Change Front End Plugins
avatar Fedik Fedik - open - 31 Jul 2023
avatar Fedik Fedik - change - 31 Jul 2023
Status New Pending
avatar dgrammatiko
dgrammatiko - comment - 31 Jul 2023

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

avatar Fedik
Fedik - comment - 31 Jul 2023

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

avatar Fedik Fedik - change - 1 Aug 2023
Labels Added: Feature NPM Resource Changed bug PR-5.0-dev
avatar Fedik
Fedik - comment - 4 Aug 2023

This is ready for testing

avatar Fedik Fedik - change - 4 Aug 2023
The description was changed
avatar Fedik Fedik - edited - 4 Aug 2023
avatar HLeithner
HLeithner - comment - 5 Aug 2023

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

avatar HLeithner
HLeithner - comment - 9 Aug 2023

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

avatar HLeithner
HLeithner - comment - 9 Aug 2023

4.4
image
this pr:
image

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

avatar brianteeman
brianteeman - comment - 10 Aug 2023
  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)
avatar Fedik
Fedik - comment - 10 Aug 2023

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

avatar HLeithner
HLeithner - comment - 11 Aug 2023

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.

avatar brianteeman
brianteeman - comment - 11 Aug 2023

The accessibility issue really must be fixed before merge

avatar Fedik
Fedik - comment - 11 Aug 2023

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

avatar dgrammatiko
dgrammatiko - comment - 11 Aug 2023

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

avatar Fedik
Fedik - comment - 12 Aug 2023

I have enabled "tab" for codemirror in popup. This also fixing the tab escaping the modal.

btw, a default combination for code indent in codemirror 6 is:

Mod + [ = indentLess
Mod + ] = indentMore
avatar HLeithner
HLeithner - comment - 12 Aug 2023

I have enabled "tab" for codemirror in popup. This also fixing the tab escaping the modal.

btw, a default combination for code indent in codemirror 6 is:

Mod + [ = indentLess
Mod + ] = indentMore

pretty sure that only works on english keyboards, but will test it thanks

avatar HLeithner
HLeithner - comment - 12 Aug 2023

strange behavior that tab change the indent and not makes a tab, but ok better then nothing.

one strange thing is that I can tab to add indention but shit+tab jumps out of the editor and I will never get into the editor again.

is this intended?

btw. for my suprise strg+alt gr+9 (]) works on german keyboard under linux. also less with [ works.

when we get back the shortcut help it maybe an alternative for tab?

avatar Fedik
Fedik - comment - 13 Aug 2023

I will never get into the editor again

At this point TinyMCE trap the tab.

avatar HLeithner
HLeithner - comment - 13 Aug 2023

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

avatar Fedik
Fedik - comment - 13 Aug 2023

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 ?

avatar HLeithner
HLeithner - comment - 13 Aug 2023

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

avatar Fedik
Fedik - comment - 13 Aug 2023

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,

avatar HLeithner
HLeithner - comment - 13 Aug 2023

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

avatar Fedik
Fedik - comment - 13 Aug 2023

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.

avatar HLeithner HLeithner - close - 14 Aug 2023
avatar HLeithner HLeithner - merge - 14 Aug 2023
avatar HLeithner HLeithner - change - 14 Aug 2023
Status Pending Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2023-08-14 07:50:36
Closed_By HLeithner
avatar HLeithner
HLeithner - comment - 14 Aug 2023

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

Add a Comment

Login with GitHub to post a comment