4.1 TinyMCE source code plugin clean up (#36112)

* ES6+ * meh * meh * CS * Use the window dimensions * Revert the sizing func * Update build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es6.js Co-authored-by: Phil E. Taylor <[email protected]> * path * JS CS Co-authored-by: Phil E. Taylor <[email protected]> Co-authored-by: Benjamin Trenkle <[email protected]>
joomla · Jan 15, 2022 · 2b61766 · 2b61766
1 parent 1e27199
commit 2b61766
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 209 deletions.
diff --git a/build/build-modules-js/init/exemptions/tinymce.es6.js b/build/build-modules-js/init/exemptions/tinymce.es6.js
@@ -74,17 +74,17 @@ module.exports.tinyMCE = async (packageName, version) => {
   let cssContent = await readFile('build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.css', { encoding: 'utf8' });
   cssContent = await Postcss([CssNano()]).process(cssContent, { from: undefined });
   // Get the JS
-  let jsContent = await readFile('build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es5.js', { encoding: 'utf8' });
+  let jsContent = await readFile('build/media_source/plg_editors_tinymce/js/plugins/highlighter/source.es6.js', { encoding: 'utf8' });
   jsContent = await minify(jsContent, { sourceMap: false, format: { comments: false } });
   // Write the HTML file
   const htmlContent = `<!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
-    <script>${jsContent.code}</script>
+    <script type="module">${jsContent.code}</script>
     <style type="text/css">${cssContent.css}</style>
   </head>
-  <body></body>
+  <body style="height: 100vh"></body>
 </html>
 `;
 

diff --git a/build/media_source/plg_editors_tinymce/js/plugins/highlighter/plugin.es5.js b/build/media_source/plg_editors_tinymce/js/plugins/highlighter/plugin.es5.js
diff --git a/build/media_source/plg_editors_tinymce/js/plugins/highlighter/plugin.es6.js b/build/media_source/plg_editors_tinymce/js/plugins/highlighter/plugin.es6.js
@@ -0,0 +1,85 @@
+/**
+ * plugin.js
+ *
+ * Original code by Arjan Haverkamp
+ * Copyright 2013-2015 Arjan Haverkamp ([email protected])
+ */
+window.tinymce.PluginManager.add('highlightPlus', (editor, url) => {
+  const showSourceEditor = () => {
+    editor.focus();
+    editor.selection.collapse(true);
+
+    if (!editor.settings.codemirror) editor.settings.codemirror = {};
+
+    // Insert caret marker
+    if (editor.settings.codemirror && editor.settings.codemirror.saveCursorPosition) {
+      editor.selection.setContent('<span style="display: none;" class="CmCaReT">&#x0;</span>');
+    }
+
+    let codemirrorWidth = 800;
+    if (editor.settings.codemirror.width) {
+      codemirrorWidth = editor.settings.codemirror.width;
+    }
+
+    let codemirrorHeight = 550;
+    if (editor.settings.codemirror.height) {
+      codemirrorHeight = editor.settings.codemirror.height;
+    }
+
+    const buttonsConfig = [
+      {
+        type: 'custom',
+        text: 'Ok',
+        name: 'codemirrorOk',
+        primary: true,
+      },
+      {
+        type: 'cancel',
+        text: 'Cancel',
+        name: 'codemirrorCancel',
+      },
+    ];
+
+    const config = {
+      title: 'Source code',
+      url: `${url}/source.html`,
+      width: codemirrorWidth,
+      height: codemirrorHeight,
+      resizable: true,
+      maximizable: true,
+      fullScreen: editor.settings.codemirror.fullscreen,
+      saveCursorPosition: false,
+      buttons: buttonsConfig,
+    };
+
+    config.onAction = (dialogApi, actionData) => {
+      if (actionData.name === 'codemirrorOk') {
+        const doc = document.querySelectorAll('.tox-dialog__body-iframe iframe')[0];
+        doc.contentWindow.tinymceHighlighterSubmit();
+        editor.undoManager.add();
+        // eslint-disable-next-line no-use-before-define
+        win.close();
+      }
+    };
+
+    const win = editor.windowManager.openUrl(config);
+
+    if (editor.settings.codemirror.fullscreen) {
+      win.fullscreen(true);
+    }
+  };
+
+  editor.ui.registry.addButton('code', {
+    icon: 'sourcecode',
+    title: 'Source code+',
+    tooltip: 'Source code+',
+    onAction: showSourceEditor,
+  });
+
+  editor.ui.registry.addMenuItem('code', {
+    icon: 'sourcecode',
+    text: 'Source code+',
+    onAction: showSourceEditor,
+    context: 'tools',
+  });
+});