first commit

media/plg_editors_tinymce/js/plugins/joomla-highlighter/plugin.js

@@ -0,0 +1,137 @@
+/**
+ * @copyright  (C) 2023 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+window.tinymce.PluginManager.add('joomlaHighlighter', editor => {
+  const setContent = html => {
+    editor.focus();
+    editor.undoManager.transact(() => {
+      editor.setContent(html);
+    });
+    editor.selection.setCursorLocation();
+    editor.nodeChanged();
+  };
+  const getContent = () => editor.getContent({
+    source_view: true
+  });
+  let running = false;
+  const showSourceEditor = () => {
+    if (running) {
+      return;
+    }
+    running = true;
+
+    // Create the dialog
+    let cmEditor;
+    const dialogConfig = {
+      title: 'Source code',
+      body: {
+        type: 'panel',
+        classes: ['joomla-highlighter-dialog'],
+        items: [{
+          type: 'textarea',
+          name: 'textarea',
+          inputMode: 'text',
+          maximized: true
+        }]
+      },
+      size: 'large',
+      buttons: [{
+        type: 'cancel',
+        name: 'cancel',
+        text: 'Cancel'
+      }, {
+        type: 'submit',
+        name: 'save',
+        text: 'Save',
+        buttonType: 'primary'
+      }],
+      onSubmit: dialogApi => {
+        setContent(cmEditor.state.doc.toString());
+        dialogApi.close();
+      },
+      onClose: () => {
+        cmEditor.destroy();
+        cmEditor = null;
+        running = false;
+      }
+    };
+
+    // Import codemirror and open the dialog
+    // eslint-disable-next-line import/no-unresolved
+    Promise.all([import('codemirror'), import('@codemirror/view'), import('@codemirror/commands')]).then(([{
+      createFromTextarea
+    }, {
+      keymap
+    }, {
+      indentMore
+    }]) => {
+      editor.windowManager.open(dialogConfig);
+
+      // Find textarea and move it to shadow DOM to isolate from TinyMCE styling
+      const textarea = document.querySelector('.joomla-highlighter-dialog textarea');
+      const wrapper = textarea.parentElement;
+      const shadow = wrapper.attachShadow({
+        mode: 'open'
+      });
+      textarea.value = getContent();
+      shadow.appendChild(textarea);
+
+      // Move focus out of the codemirror
+      const escapeTabTrap = (view, event) => {
+        event.preventDefault();
+        // Find a Save button
+        const dialogEl = wrapper.closest('[role="dialog"]');
+        const btnEl = dialogEl.querySelector('.tox-dialog__footer [type="button"]:not(.tox-button--secondary)');
+        if (btnEl) {
+          btnEl.focus();
+        } else {
+          dialogEl.focus();
+        }
+      };
+      const cmOptions = {
+        mode: 'html',
+        lineNumbers: true,
+        lineWrapping: true,
+        activeLine: true,
+        highlightSelection: true,
+        foldGutter: true,
+        width: '100%',
+        height: '100%',
+        root: shadow,
+        customExtensions: [
+        // Enable Tab trapping
+        () => keymap.of([{
+          key: 'Tab',
+          run: indentMore,
+          shift: escapeTabTrap
+        }])]
+      };
+      const wrapperheight = wrapper.scrollHeight;
+      createFromTextarea(textarea, cmOptions).then(cmView => {
+        cmEditor = cmView;
+        cmEditor.focus();
+        cmEditor.dom.style.maxHeight = `${wrapperheight}px`;
+      });
+    });
+  };
+  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'
+  });
+  editor.addShortcut('Alt+U', 'Opens the code editor', showSourceEditor);
+  return {
+    getMetadata: () => ({
+      name: 'Source Code Editor (Joomla)',
+      url: 'https://www.joomla.org/'
+    })
+  };
+});

media/plg_editors_tinymce/js/plugins/joomla-highlighter/plugin.min.js

@@ -0,0 +1 @@
+window.tinymce.PluginManager.add("joomlaHighlighter",(e=>{let t=!1;const o=()=>{if(t)return;let o;t=!0;const n={title:"Source code",body:{type:"panel",classes:["joomla-highlighter-dialog"],items:[{type:"textarea",name:"textarea",inputMode:"text",maximized:!0}]},size:"large",buttons:[{type:"cancel",name:"cancel",text:"Cancel"},{type:"submit",name:"save",text:"Save",buttonType:"primary"}],onSubmit:t=>{var n;n=o.state.doc.toString(),e.focus(),e.undoManager.transact((()=>{e.setContent(n)})),e.selection.setCursorLocation(),e.nodeChanged(),t.close()},onClose:()=>{o.destroy(),o=null,t=!1}};Promise.all([import("codemirror"),import("@codemirror/view"),import("@codemirror/commands")]).then((([{createFromTextarea:t},{keymap:r},{indentMore:a}])=>{e.windowManager.open(n);const i=document.querySelector(".joomla-highlighter-dialog textarea"),c=i.parentElement,l=c.attachShadow({mode:"open"});i.value=e.getContent({source_view:!0}),l.appendChild(i);const d=(e,t)=>{t.preventDefault();const o=c.closest('[role="dialog"]'),n=o.querySelector('.tox-dialog__footer [type="button"]:not(.tox-button--secondary)');n?n.focus():o.focus()},s={mode:"html",lineNumbers:!0,lineWrapping:!0,activeLine:!0,highlightSelection:!0,foldGutter:!0,width:"100%",height:"100%",root:l,customExtensions:[()=>r.of([{key:"Tab",run:a,shift:d}])]},u=c.scrollHeight;t(i,s).then((e=>{o=e,o.focus(),o.dom.style.maxHeight=`${u}px`}))}))};return e.ui.registry.addButton("code",{icon:"sourcecode",title:"Source code+",tooltip:"Source code+",onAction:o}),e.ui.registry.addMenuItem("code",{icon:"sourcecode",text:"Source code+",onAction:o,context:"tools"}),e.addShortcut("Alt+U","Opens the code editor",o),{getMetadata:()=>({name:"Source Code Editor (Joomla)",url:"https://www.joomla.org/"})}}));