[4.1] Tiny source code syntax highlighting #35647

brianteeman · 2021-09-22T18:18:05Z

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

build/media_source/plg_editors_tinymce/js/plugins/highlighter/plugin.es5.js

build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js

dgrammatiko · 2021-09-22T20:28:38Z

I need help building the source.html file with our build scripts. I am guessing it will be built similar to the error pages

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.

brianteeman · 2021-09-22T20:41:58Z

hint?

dgrammatiko · 2021-09-22T20:44:54Z

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

brianteeman · 2021-09-22T20:46:51Z

oh - didnt realise thats what you meant

woluweb · 2021-09-23T08:10:05Z

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.

brianteeman · 2021-09-23T08:13:17Z

I am looking at both those points

dgrammatiko · 2021-09-23T08:23:57Z

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
  ]
]

brianteeman · 2021-09-23T08:24:42Z

yeah I know ;)
I just wanted to put up a quick draft so I could ask about the html file

dgrammatiko · 2021-09-23T13:27:04Z

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:

build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js

bembelimen · 2021-10-19T15:47:31Z

Should this really be 4.0 or is 4.1 the target? If later, would be happy to include it.

woluweb · 2021-10-19T19:55:06Z

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 :)

brianteeman · 2021-10-25T10:07:54Z

@Fedik please could you review and check the changes you requested

brianteeman · 2021-11-22T14:34:23Z

conflicts resolved

chmst · 2021-11-22T22:49:38Z

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?

dgrammatiko · 2021-11-22T23:45:39Z

@brianteeman check brianteeman#131

* Revert the change for scripts/styles Whenever we append a script tag using JS the script is loading ASYNC and most probably will break the order of execution * Give the dog a bone

chmst · 2021-11-23T07:46:24Z

Works :)

woluweb · 2021-11-23T08:03:37Z

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 :)

Krshivam25 · 2021-11-23T13:16:51Z

I have tested this item ✅ successfully on e283301

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35647.}

chmst · 2021-11-23T15:53:22Z

Can we test now or is it better waiting changes in the window?

chmst · 2021-11-23T22:29:21Z

I have tested this item ✅ successfully on e283301

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35647.}

richard67 · 2021-11-23T22:30:27Z

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35647.}

chmst · 2021-11-23T22:31:54Z

THX

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35647.}

bembelimen · 2021-11-24T13:58:16Z

Very cool feature, thank you!

brianteeman · 2021-11-24T14:04:29Z

thanks

bsakhanov · 2022-01-19T11:56:26Z

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.

brianteeman · 2022-01-19T12:36:29Z

Not really sure I understand what you are asking for here but afaict everything is already present in joomla 4 and tinymce

brianteeman added 2 commits September 22, 2021 12:41

basics

7e27b1a

language and options

e7d1832

joomla-cms-bot added Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Sep 22, 2021

richard67 reviewed Sep 22, 2021

View reviewed changes

build/media_source/plg_editors_tinymce/js/plugins/highlighter/plugin.es5.js Show resolved Hide resolved

richard67 reviewed Sep 22, 2021

View reviewed changes

build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js Show resolved Hide resolved

dgrammatiko reviewed Sep 22, 2021

View reviewed changes

build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js Show resolved Hide resolved

clean temp

e812af2

Fedik reviewed Sep 25, 2021

View reviewed changes

build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js Outdated Show resolved Hide resolved

Fedik reviewed Sep 25, 2021

View reviewed changes

build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js Outdated Show resolved Hide resolved

Fedik reviewed Sep 25, 2021

View reviewed changes

build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js Outdated Show resolved Hide resolved

Fedik reviewed Sep 25, 2021

View reviewed changes

build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js Outdated Show resolved Hide resolved

brianteeman changed the base branch from 4.0-dev to 4.1-dev October 22, 2021 22:14

brianteeman changed the title ~~Tiny source code syntax highlighting~~ [4.1] Tiny source code syntax highlighting Oct 22, 2021

joomla-cms-bot added the PR-4.1-dev label Oct 22, 2021

brianteeman added 2 commits October 25, 2021 10:40

code corrections from @Fedik

e5a572d

Merge branch '4.1-dev' into tiny-codemirror

5b76180

Merge branch '4.1-dev' into tiny-codemirror

2f57bf8

bembelimen added this to the Joomla 4.1 milestone Nov 9, 2021

Quy removed the PR-4.0-dev label Nov 9, 2021

Merge branch '4.1-dev' into tiny-codemirror

b63b8e9

Update setoptions.xml

95f9ff2

Revert the change for scripts/styles (#131)

e283301

* Revert the change for scripts/styles Whenever we append a script tag using JS the script is loading ASYNC and most probably will break the order of execution * Give the dog a bone

joomla-cms-bot removed this from the Joomla 4.1 milestone Nov 23, 2021

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Nov 23, 2021

richard67 added this to the Joomla 4.1 milestone Nov 23, 2021

Merge branch '4.1-dev' into tiny-codemirror

14d7132

bembelimen merged commit 137f19f into joomla:4.1-dev Nov 24, 2021

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Nov 24, 2021

brianteeman deleted the tiny-codemirror branch November 24, 2021 14:04

jgerman-bot mentioned this pull request Nov 24, 2021

[4.1] Tiny source code syntax highlighting joomlagerman/joomla#2132

Closed

joomlapl-bot mentioned this pull request Nov 24, 2021

[4.1] Tiny source code syntax highlighting JoomlaPolska/jezyk-J4#69

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4.1] Tiny source code syntax highlighting #35647

[4.1] Tiny source code syntax highlighting #35647

brianteeman commented Sep 22, 2021

dgrammatiko commented Sep 22, 2021

brianteeman commented Sep 22, 2021

dgrammatiko commented Sep 22, 2021

brianteeman commented Sep 22, 2021

woluweb commented Sep 23, 2021

brianteeman commented Sep 23, 2021

dgrammatiko commented Sep 23, 2021 •

edited

Loading

brianteeman commented Sep 23, 2021 •

edited

Loading

dgrammatiko commented Sep 23, 2021 •

edited

Loading

bembelimen commented Oct 19, 2021

woluweb commented Oct 19, 2021

brianteeman commented Oct 25, 2021

brianteeman commented Nov 22, 2021

chmst commented Nov 22, 2021 •

edited

Loading

dgrammatiko commented Nov 22, 2021

chmst commented Nov 23, 2021

woluweb commented Nov 23, 2021

Krshivam25 commented Nov 23, 2021

chmst commented Nov 23, 2021

chmst commented Nov 23, 2021

richard67 commented Nov 23, 2021

chmst commented Nov 23, 2021

bembelimen commented Nov 24, 2021

brianteeman commented Nov 24, 2021

bsakhanov commented Jan 19, 2022

brianteeman commented Jan 19, 2022

[4.1] Tiny source code syntax highlighting #35647

[4.1] Tiny source code syntax highlighting #35647

Conversation

brianteeman commented Sep 22, 2021

Before

After

Testing

Why this is a draft

dgrammatiko commented Sep 22, 2021

brianteeman commented Sep 22, 2021

dgrammatiko commented Sep 22, 2021

brianteeman commented Sep 22, 2021

woluweb commented Sep 23, 2021

1. making the popup (almost) fullscreen?

2. using the options of CodeMirror Plugin?

brianteeman commented Sep 23, 2021

dgrammatiko commented Sep 23, 2021 • edited Loading

brianteeman commented Sep 23, 2021 • edited Loading

dgrammatiko commented Sep 23, 2021 • edited Loading

bembelimen commented Oct 19, 2021

woluweb commented Oct 19, 2021

brianteeman commented Oct 25, 2021

brianteeman commented Nov 22, 2021

chmst commented Nov 22, 2021 • edited Loading

dgrammatiko commented Nov 22, 2021

chmst commented Nov 23, 2021

woluweb commented Nov 23, 2021

Krshivam25 commented Nov 23, 2021

chmst commented Nov 23, 2021

chmst commented Nov 23, 2021

richard67 commented Nov 23, 2021

chmst commented Nov 23, 2021

bembelimen commented Nov 24, 2021

brianteeman commented Nov 24, 2021

bsakhanov commented Jan 19, 2022

brianteeman commented Jan 19, 2022

dgrammatiko commented Sep 23, 2021 •

edited

Loading

brianteeman commented Sep 23, 2021 •

edited

Loading

dgrammatiko commented Sep 23, 2021 •

edited

Loading

chmst commented Nov 22, 2021 •

edited

Loading