[Summary view] [Print] [Text view]

   1  class CodemirrorEditor extends HTMLElement {
   2    constructor() {
   3      super();
   4      this.instance = '';
   5      this.host = window.location.origin;
   6      this.element = this.querySelector('textarea');
   7      this.refresh = this.refresh.bind(this); // Observer instance to refresh the Editor when it become visible, eg after Tab switching
   8  
   9      this.intersectionObserver = new IntersectionObserver(entries => {
  10        if (entries[0].isIntersecting && this.instance) {
  11          this.instance.refresh();
  12        }
  13      }, {
  14        threshold: 0
  15      });
  16    }
  17  
  18    static get observedAttributes() {
  19      return ['options'];
  20    }
  21  
  22    get options() {
  23      return JSON.parse(this.getAttribute('options'));
  24    }
  25  
  26    set options(value) {
  27      this.setAttribute('options', value);
  28    }
  29  
  30    attributeChangedCallback(attr, oldValue, newValue) {
  31      switch (attr) {
  32        case 'options':
  33          if (oldValue && newValue !== oldValue) {
  34            this.refresh(this.element);
  35          }
  36  
  37          break;
  38  
  39      }
  40    }
  41  
  42    async connectedCallback() {
  43      const cmPath = this.getAttribute('editor');
  44      const addonsPath = this.getAttribute('addons');
  45      await import(`$this.host}/$cmPath}`);
  46  
  47      if (this.options.keyMapUrl) {
  48        await import(`$this.host}/$this.options.keyMapUrl}`);
  49      }
  50  
  51      await import(`$this.host}/$addonsPath}`);
  52      const that = this; // For mode autoloading.
  53  
  54      window.CodeMirror.modeURL = this.getAttribute('mod-path'); // Fire this function any time an editor is created.
  55  
  56      window.CodeMirror.defineInitHook(editor => {
  57        // Try to set up the mode
  58        const mode = window.CodeMirror.findModeByName(editor.options.mode || '') || window.CodeMirror.findModeByExtension(editor.options.mode || '');
  59        window.CodeMirror.autoLoadMode(editor, typeof mode === 'object' ? mode.mode : editor.options.mode);
  60  
  61        if (mode && mode.mime) {
  62          // Fix the x-php error
  63          if (['text/x-php', 'application/x-httpd-php', 'application/x-httpd-php-open'].includes(mode.mime)) {
  64            editor.setOption('mode', 'php');
  65          } else {
  66            editor.setOption('mode', mode.mime);
  67          }
  68        }
  69  
  70        const toggleFullScreen = () => {
  71          that.instance.setOption('fullScreen', !that.instance.getOption('fullScreen'));
  72          const header = document.getElementById('subhead');
  73  
  74          if (header) {
  75            const header1 = document.getElementById('header');
  76            header1.classList.toggle('hidden');
  77            header.classList.toggle('hidden');
  78            that.instance.display.wrapper.style.top = `$header.getBoundingClientRect().height}px`;
  79          }
  80        };
  81  
  82        const closeFullScreen = () => {
  83          that.instance.getOption('fullScreen');
  84          that.instance.setOption('fullScreen', false);
  85  
  86          if (!that.instance.getOption('fullScreen')) {
  87            const header = document.getElementById('subhead');
  88  
  89            if (header) {
  90              const header1 = document.getElementById('header');
  91              header.classList.toggle('hidden');
  92              header1.classList.toggle('hidden');
  93              that.instance.display.wrapper.style.top = `$header.getBoundingClientRect().height}px`;
  94            }
  95          }
  96        };
  97  
  98        const map = {
  99          'Ctrl-Q': toggleFullScreen,
 100          [that.getAttribute('fs-combo')]: toggleFullScreen,
 101          Esc: closeFullScreen
 102        };
 103        editor.addKeyMap(map);
 104  
 105        const makeMarker = () => {
 106          const marker = document.createElement('div');
 107          marker.className = 'CodeMirror-markergutter-mark';
 108          return marker;
 109        }; // Handle gutter clicks (place or remove a marker).
 110  
 111  
 112        editor.on('gutterClick', (ed, n, gutter) => {
 113          if (gutter !== 'CodeMirror-markergutter') {
 114            return;
 115          }
 116  
 117          const info = ed.lineInfo(n);
 118          const hasMarker = !!info.gutterMarkers && !!info.gutterMarkers['CodeMirror-markergutter'];
 119          ed.setGutterMarker(n, 'CodeMirror-markergutter', hasMarker ? null : makeMarker());
 120        });
 121        /* Some browsers do something weird with the fieldset which doesn't
 122          work well with CodeMirror. Fix it. */
 123  
 124        if (that.parentNode.tagName.toLowerCase() === 'fieldset') {
 125          that.parentNode.style.minWidth = 0;
 126        }
 127      }); // Register Editor
 128  
 129      this.instance = window.CodeMirror.fromTextArea(this.element, this.options);
 130  
 131      this.instance.disable = disabled => this.setOption('readOnly', disabled ? 'nocursor' : false);
 132  
 133      Joomla.editors.instances[this.element.id] = this.instance; // Watch when the element in viewport, and refresh the editor
 134  
 135      this.intersectionObserver.observe(this);
 136    }
 137  
 138    disconnectedCallback() {
 139      // Remove from the Joomla API
 140      delete Joomla.editors.instances[this.element.id]; // Remove from observer
 141  
 142      this.intersectionObserver.unobserve(this);
 143    }
 144  
 145    refresh(element) {
 146      this.instance.fromTextArea(element, this.options);
 147    }
 148  
 149  }
 150  
 151  customElements.define('joomla-editor-codemirror', CodemirrorEditor);