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/'
+    })
+  };
+});