[#35647] - [4.1] Tiny source code syntax highlighting
- Fixed in Code Base
- 24 Nov 2021
- Medium
- Build: 4.0-dev
- # 35647
- Diff
- brianteeman:tiny-codemirror
User tests: Successful: Unsuccessful:
This PR
changes the source code view of tinymce from raw text to a rich syntax highlighted area using codemirror.
It is enabled by default but there is an option in the plugin to disable it - can't imagine why someone would want though.
There are no additional tinymce strings to translate as I have reused existing strings.
As the code plugin is enabled by default in set 0 for super users you can activate the view either from the tools menu or the <> icon. If it is not enabled in your configuration then you will need to drag and drop the icon to your toolbar in the tinymce plugin
Before
After
As you can see you now also have search and replace etc.
Testing
Apply the pr and run npm ci
AND copy the file build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.html to `media/plg_editors_tinymce/js/plugins/highlighter/source.html
Why this is a draft
I need help building the source.html file with our build scripts. I am guessing it will be built similar to the error pages
Thanks to @woluweb and @dgrammatiko
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration Language & Strings JavaScript Repository NPM Change Front End Plugins |
hint?
source.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// copy the contents of source.es5.js here
</script>
<style type="text/css">
// copy the contents of source.css here
</style>
</head>
<body></body>
</html>
Delete the extra files
oh - didnt realise thats what you meant
Txs @dgrammatiko for your plugin and txs @brianteeman for implementing this PR!
This is very exciting.
It will be so handy on a day-to-day basis... and also it will give an extra incentive to use TinyMCE and stick to the core :)
If I may, I have two suggestions:
1. making the popup (almost) fullscreen?
At present the size of the popup is (only) 800x550, which is quite small especially to work comfortably with html code.
When testing Dimitris' plugin, I "cheated" by adding the following in Atum's user.css to go (almost) full-screen, since it is a popup anyway:
.tox-dialog {
width: calc(100vw - 100px) !important;
max-width: unset !important;
height: calc(100vh - 100px) !important;
max-height: unset !important;
}
But it would probably be nicer to have it natively.
Alternatively, if it is possible to implement the "fullscreen shortcut" (F10) (which works when selecting CodeMirror editor itself, even if there is a positioning issue bc the first lines are hidden behind the Save buttons bar), that could also solve the issue of the popup being "too small".
2. using the options of CodeMirror Plugin?
The popup with Syntax Highliting uses CodeMirror, but does not seem to use the Options set in the CodeMirror Plugin (it uses the default I guess).
I am already very happy as it is now, obviously.
But I wanted to mention it just in case it would be easy to apply CodeMirror Plugin Options.
I am looking at both those points
I "cheated" by adding the following in Atum's user.css
This has weird implications as it will make ALL the tinyMCE dialogs almost fullscreen. There's another way for this
but does not seem to use the Options set in the CodeMirror Plugin
Since I didn't wanted to create a Joomla plugin I left this with some defaults but it is possible to have the options exposed in the tinyMCE's configuration. Basically all it's needed is:
- remove this part from the source.js
// CodeMirror settings
const CMsettings = {
path: '../../../../vendor/codemirror',
indentOnInit: true,
// start remove
config: {
mode: 'htmlmixed',
theme: 'default',
lineNumbers: true,
lineWrapping: true,
indentUnit: 2,
tabSize: 2,
indentWithTabs: true,
matchBrackets: true,
saveCursorPosition: true,
styleActiveLine: true,
},
// end remove
jsFiles: [// Default JS files
'lib/codemirror.min.js',
'addon/edit/matchbrackets.min.js',
'mode/xml/xml.min.js',
'mode/javascript/javascript.min.js',
'mode/css/css.min.js',
'mode/htmlmixed/htmlmixed.min.js',
'addon/dialog/dialog.min.js',
'addon/search/searchcursor.min.js',
'addon/search/search.min.js',
'addon/selection/active-line.min.js',
],
cssFiles: [// Default CSS files
'lib/codemirror.css',
'addon/dialog/dialog.css',
],
};- in the tinyMCE.php pass the options like:
$scriptOptions['codemirror'] = [
'settings' => [
'indentOnInit' => true, // the true should be $levelParams->get('codemirroe_settings_indentoninit'); which is a toogle in the settings form
]
]
yeah I know ;)
I just wanted to put up a quick draft so I could ask about the html file
About the maximised modal, this should do it:
const rects = document.body.getBoundingClientRect();
const config = {
title: 'HTML source code',
url: url + '/source.html',
width: rects.width - 5,
height: rects.height - 150,
resizable: true,
maximizable: true,
fullScreen: true,
saveCursorPosition: false,
buttons: buttonsConfig
}Result:
Should this really be 4.0 or is 4.1 the target? If later, would be happy to include it.
Should this really be 4.0 or is 4.1 the target? If later, would be happy to include it.
Well, it is not up to me to say but I hope we won't have to wait until 4.1 for Syntax Highlighting :)
| Title |
|
||||||
| Labels |
Added:
Language Change
?
NPM Resource Changed
?
|
||
@brianteeman they looks good now :)
@brianteeman check brianteeman#130
hound says no ??
Hound was removed many months ago, I have no clue why you still have that around
@brianteeman it should be fine now
| Labels |
Removed:
?
|
||
conflicts resolved
Tested on a fresh installation of 4.1. dev on a new database. Applied Patch, run npm ci..
@brianteeman could you please remove the testing instruction here:
AND copy the file build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.html to `media/plg_editors_tinymce/js/plugins/highlighter/source.html
The result:
Did I miss something?
@brianteeman check brianteeman#131
Works :)
Txs to all for this PR
@dgrammatiko had mentioned a clean solution above to have the popup (almost) full-screen (and not like 600x400 like it is by default now).
I really think we should go for that bc in practice it won't be very handy if the popup only covers like 1/4 of the screen, especially for Code editing.
This PR gives an extra incentive to have people using TinyMCE -which is excellent- so let's have this popup (almost) full-screen to get the full benefit of it :)
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35647.
Can we test now or is it better waiting changes in the window?
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35647.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35647.
THX
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35647.
| Labels |
Added:
?
|
||
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-11-24 13:58:09 |
| Closed_By | ⇒ | bembelimen |
Very cool feature, thank you!
thanks
For TinyMCE, such features would also be relevant (in the form of plugins, maybe)... For example, along with Quantum (as a media manager), I have to use JCE for projects (a shell for TinyMCE as a component of a visual editor for jumla) only because of a few things: 1) working with the source code, i.e. with the code is convenient — there is a cool search with autocorrect; 2) auto-insertion is clearly worked out directly into the text of the video article, when just a short YouTube url is immediately transformed into a video insertion code with a frame, plus inserts from social networks (Twitter, Facebook, etc.) work similarly.; 3) in the visual editor mode, the text format is displayed there — a paragraph or divas, for example, which is very convenient.
Not really sure I understand what you are asking for here but afaict everything is already present in joomla 4 and tinymce
This is getting complicated due to the fact that the output is an HTML page and we don't want the sources in the media folder. I would just concatenate the source script and CSS in the HTML directly (non minified, it's not that much code anyway) and delete the js and css sources.