User tests: Successful: Unsuccessful:
Pull Request for Issue #41278 .
(Re)Writing a plugin for TinyMCE code highlighting with CodeMirror 6.
Apply patch, run npm install
.
Enable "code highlighting" in TinyMCE plugin parameters.
Open article editing and check that "code highlighting" is working
working
working
Please select:
Category | ⇒ | JavaScript Repository NPM Change Front End Plugins |
Status | New | ⇒ | Pending |
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
Labels |
Added:
Feature
NPM Resource Changed
bug
PR-5.0-dev
|
This is ready for testing
@brianteeman you may have time tomorrow for a quick look?
it works for me but looks different then 4.4 version right?
@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.
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.
The accessibility issue really must be fixed before merge
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
@Fedik just switch to the Joomla modal and ask @HLeithner to finally merge that PR...
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
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
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?
I will never get into the editor again
At this point TinyMCE trap the tab.
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
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
but at this point in time tinymce isn't in charge of doing anything or?
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,
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.
Status | Pending | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2023-08-14 07:50:36 |
Closed_By | ⇒ | HLeithner |
@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...