classroomio/apps/dashboard/src/lib/utils/functions/tinymce/plugins.ts

import { PUBLIC_SERVER_URL } from '$env/static/public';

var win, output, textarea;

// Follow this guide to get source code: https://editor.codecogs.com/docs/3-Tiny_MCE_v6.php
export const addMathPlugin = (tinymce: any) => {
  tinymce.PluginManager.add('eqneditor', function (editor, url) {
    // Load necessary javascript for editor from CodeCogs
    var sl = new tinymce.dom.ScriptLoader();
    sl.add('https://assets.cdn.clsrio.com/eqneditor.api.min.js');
    var loaded = sl.loadQueue();

    // Load custom CSS
    tinymce.DOM.loadCSS('https://assets.cdn.clsrio.com/eqneditor_1.css');

    editor.ui.registry.addIcon(
      'logo',
      `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="18px" height="20px" viewBox="0 0 18 20" enable-background="new 0 0 18 20" xml:space="preserve">
<rect x="4.4" y="5.1" fill="none" width="38.6" height="43.4"/>
<g enable-background="new    ">
  <path d="M4,9.5H2L2.3,7h2.1l0.3-1.8C4.7,4.6,4.9,4.1,5,3.6c0.2-0.5,0.4-0.9,0.7-1.3c0.3-0.4,0.8-0.7,1.3-0.9C7.7,1.1,8.4,1,9.2,1
      c0.3,0,0.6,0,0.9,0c0.3,0,0.6,0.1,0.9,0.1l-0.5,2.7c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1,0-0.3-0.1-0.5-0.1C9,3.7,8.6,3.8,8.4,4
      C8.1,4.2,7.9,4.7,7.8,5.4L7.6,7h2.3L9.5,9.5H7.2l-1.1,7.7H3L4,9.5z"/>
</g>
<g enable-background="new    ">
  <path d="M11.1,15.3l-2.3-3.2h2.5l1.2,1.8l1.2-1.8H16l-2.2,3.2l2.6,3.6h-2.5l-1.5-2.3L10.8,19H8.4L11.1,15.3z"/>
</g>
</svg>`
    );

    editor.ui.registry.addIcon(
      'menu',
      `<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='11.473512pt' height='12.266481pt' viewBox='-.239051 -.242965 11.473512 12.266481'>
    <defs>
    <path id='g0-120' d='M3.993026-3.180075C3.642341-3.092403 3.626401-2.781569 3.626401-2.749689C3.626401-2.574346 3.761893-2.454795 3.937235-2.454795S4.383562-2.590286 4.383562-2.933001C4.383562-3.387298 3.881445-3.514819 3.58655-3.514819C3.211955-3.514819 2.909091-3.251806 2.725778-2.940971C2.550436-3.363387 2.13599-3.514819 1.809215-3.514819C.940473-3.514819 .454296-2.518555 .454296-2.295392C.454296-2.223661 .510087-2.191781 .573848-2.191781C.669489-2.191781 .68543-2.231631 .70934-2.327273C.892653-2.909091 1.370859-3.291656 1.785305-3.291656C2.096139-3.291656 2.247572-3.068493 2.247572-2.781569C2.247572-2.622167 2.15193-2.255542 2.088169-2.000498C2.032379-1.769365 1.857036-1.060025 1.817186-.908593C1.705604-.478207 1.41868-.143462 1.060025-.143462C1.028144-.143462 .820922-.143462 .653549-.255044C1.020174-.342715 1.020174-.67746 1.020174-.68543C1.020174-.868742 .876712-.980324 .70137-.980324C.486177-.980324 .255044-.797011 .255044-.494147C.255044-.127522 .645579 .079701 1.052055 .079701C1.474471 .079701 1.769365-.239103 1.912827-.494147C2.088169-.103611 2.454795 .079701 2.83736 .079701C3.706102 .079701 4.184309-.916563 4.184309-1.139726C4.184309-1.219427 4.120548-1.243337 4.064757-1.243337C3.969116-1.243337 3.953176-1.187547 3.929265-1.107846C3.769863-.573848 3.315567-.143462 2.8533-.143462C2.590286-.143462 2.399004-.318804 2.399004-.653549C2.399004-.812951 2.446824-.996264 2.558406-1.44259C2.614197-1.681694 2.789539-2.383064 2.82939-2.534496C2.940971-2.948941 3.219925-3.291656 3.57858-3.291656C3.618431-3.291656 3.825654-3.291656 3.993026-3.180075Z'/>
    <path id='g1-102' d='M5.332005-4.805978C5.571108-4.805978 5.66675-4.805978 5.66675-5.033126C5.66675-5.152677 5.571108-5.152677 5.355915-5.152677H4.387547C4.614695-6.38406 4.782067-7.232877 4.877709-7.615442C4.94944-7.902366 5.200498-8.177335 5.511333-8.177335C5.762391-8.177335 6.01345-8.069738 6.133001-7.962142C5.66675-7.914321 5.523288-7.567621 5.523288-7.364384C5.523288-7.12528 5.702615-6.981818 5.929763-6.981818C6.168867-6.981818 6.527522-7.185056 6.527522-7.639352C6.527522-8.141469 6.025405-8.416438 5.499377-8.416438C4.985305-8.416438 4.483188-8.033873 4.244085-7.567621C4.028892-7.149191 3.90934-6.718804 3.634371-5.152677H2.833375C2.606227-5.152677 2.486675-5.152677 2.486675-4.937484C2.486675-4.805978 2.558406-4.805978 2.797509-4.805978H3.56264C3.347447-3.694147 2.857285-.992279 2.582316 .286924C2.379078 1.327024 2.199751 2.199751 1.601993 2.199751C1.566127 2.199751 1.219427 2.199751 1.004234 1.972603C1.613948 1.924782 1.613948 1.398755 1.613948 1.3868C1.613948 1.147696 1.43462 1.004234 1.207472 1.004234C.968369 1.004234 .609714 1.207472 .609714 1.661768C.609714 2.175841 1.135741 2.438854 1.601993 2.438854C2.82142 2.438854 3.323537 .251059 3.455044-.3467C3.670237-1.267248 4.25604-4.447323 4.315816-4.805978H5.332005Z'/>
    </defs>
    <g id='page1' transform='matrix(1.13 0 0 1.13 -63.986043 -65.03376)'>
    <use x='56.413267' y='65.753425' xlink:href='#g1-102'/>
    <use x='62.183256' y='67.546688' xlink:href='#g0-120'/>
    </g>
    </svg>`
    );

    function showDialog(inp = '') {
      var http = 'https:' == document.location.protocol ? 'https://' : 'http://';

      win = editor.windowManager.open({
        title: 'Equation Editor',
        size: 'medium',
        body: {
          type: 'panel',
          items: [
            {
              type: 'htmlpanel',
              html:
                '<div id="equation-editor">' +
                '<div id="history"></div>' +
                '<div id="toolbar"></div>' +
                '<div id="latexInput" autocorrect="off"></div>' +
                '<div id="equation-output">' +
                '<img id="output"></div></div>'
            }
          ]
        },
        buttons: [
          {
            type: 'cancel',
            name: 'closeButton',
            text: 'Cancel'
          },
          {
            type: 'submit',
            name: 'submitButton',
            text: 'Ok',
            buttonType: 'primary'
          }
        ],
        onSubmit: async function (w) {
          let content = output.exportAs('html');

          // The generated content always points to https://latex.codecogs.com/svg.image, this means we have to always rely on their server to serve formulas. We have a dedicated endpoint for generating formulas on our backend service: GET `/katex`. We will need to manually update the URL in the generate HTML to point to our server:
          // https://latex.codecogs.com/svg.image

          // 1. Get only the URL in the img tag generated by codecogs library
          const srcRegex = /<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>/i;
          const srcMatch = content.match(srcRegex);

          if (srcMatch) {
            // 2. Point the formula to our server
            const customAPI = PUBLIC_SERVER_URL + '/katex';
            const url = srcMatch[1]?.replaceAll('https://latex.codecogs.com/svg.image', customAPI);

            // 3. Fetch the HTML from the server
            const response = await fetch(url);
            const html = await response.text();

            // 4. Set the content to the html
            content = html;
          } else {
            console.error('No src attribute found in the img tag.');
          }

          tinymce.activeEditor.execCommand('mceInsertContent', false, content);
          textarea.pushToHistory();
          w.close();
        },
        onCancel: function (w) {
          w.close();
        },
        onAction: function (w, dets) {
          if (dets.name == 'logo') {
            window.open(http + 'editor.codecogs.com', '_blank')?.focus();
          }
        }
      });

      // Ensure EqnEditor js is loaded before continuing
      loaded.then(() => {
        output = new EqEditor.Output('output');
        textarea = EqEditor.TextArea.link('latexInput')
          .addOutput(output)
          .addHistoryMenu(new EqEditor.History('history'));
        EqEditor.Toolbar.link('toolbar').addTextArea(textarea);

        var nodes = document.getElementById('history')?.childNodes || [];
        for (var i = 0; i < nodes.length; i++) {
          nodes[i].style.padding = 'revert';
        }

        textarea.clear();
        textarea.insert(inp.replace(/&space;/g, ' '), inp.length);
      });
    }

    editor.ui.registry.addButton('eqneditor', {
      title: 'Equation',
      icon: 'menu',
      tooltip: 'Insert Equation',
      onAction: () => {
        showDialog();
      }
      // stateSelector: 'img[src*="latex"]'
    });

    editor.on('dblclick', function (e) {
      if (e.target.nodeName.toLowerCase() == 'img') {
        var sName = e.target.src.match(/(gif|svg)\.image\?(.*)/);
        if (sName != null) showDialog(sName[2]);
      }
    });

    return {
      getMetadata: () => ({
        name: 'EqnEditor',
        url: 'https://editor.codecogs.com/docs/3-Tiny_MCE_v4x.php'
      })
    };
  });
};