CodeMirrorElement.ts 4.78 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */

import CodeMirror from 'codemirror';
Benjamin Franzke's avatar
Benjamin Franzke committed
15
16
import {LitElement, html, css, CSSResult} from 'lit';
import {customElement, property, state} from 'lit/decorators';
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import FormEngine = require('TYPO3/CMS/Backend/FormEngine');

import 'TYPO3/CMS/Backend/Element/SpinnerElement'

/**
 * Module: TYPO3/CMS/T3editor/Element/CodeMirrorElement
 * Renders CodeMirror into FormEngine
 */
@customElement('typo3-t3editor-codemirror')
export class CodeMirrorElement extends LitElement {
  @property() mode: string;
  @property() label: string;
  @property({type: Array}) addons: string[] = [];
  @property({type: Object}) options: { [key: string]: any[] } = {};
Benjamin Franzke's avatar
Benjamin Franzke committed
31
  @state() loaded: boolean = false;
32

Benjamin Franzke's avatar
Benjamin Franzke committed
33
34
35
36
37
38
39
40
41
42
43
44
  static styles = css`
   :host {
     display: block;
     position: relative;
   }
   typo3-backend-spinner {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
  `;
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

  render() {
    return html`
      <slot></slot>
      <slot name="codemirror"></slot>
      ${this.loaded ? '' : html`<typo3-backend-spinner size="large"></typo3-backend-spinner>`}
    `;
  }

  firstUpdated(): void {
    const observerOptions = {
      root: document.body
    };
    let observer = new IntersectionObserver((entries: IntersectionObserverEntry[]): void => {
      entries.forEach((entry: IntersectionObserverEntry): void => {
        if (entry.intersectionRatio > 0) {
          observer.unobserve(entry.target);
          if (this.firstElementChild && this.firstElementChild.nodeName.toLowerCase() === 'textarea') {
            this.initializeEditor(<HTMLTextAreaElement>this.firstElementChild);
          }
        }
      });
    }, observerOptions);

    observer.observe(this);
  }

  private createPanelNode(position: string, label: string): HTMLElement {
    const node = document.createElement('div');
    node.setAttribute('class', 'CodeMirror-panel CodeMirror-panel-' + position);
    node.setAttribute('id', 'panel-' + position);

    const span = document.createElement('span');
    span.textContent = label;

    node.appendChild(span);

    return node;
  }

  private initializeEditor(textarea: HTMLTextAreaElement): void {
    const modeParts = this.mode.split('/');
    const options = this.options;

    // load mode + registered addons
    require([this.mode, ...this.addons], (): void => {
      const cm = CodeMirror((node: HTMLElement): void => {
        const wrapper = document.createElement('div');
        wrapper.setAttribute('slot', 'codemirror');
        wrapper.appendChild(node);
        this.insertBefore(wrapper, textarea);
      }, {
        value: textarea.value,
        extraKeys: {
          'Ctrl-F': 'findPersistent',
          'Cmd-F': 'findPersistent',
          'Ctrl-Alt-F': (codemirror: any): void => {
            codemirror.setOption('fullScreen', !codemirror.getOption('fullScreen'));
          },
          'Ctrl-Space': 'autocomplete',
          'Esc': (codemirror: any): void => {
            if (codemirror.getOption('fullScreen')) {
              codemirror.setOption('fullScreen', false);
            }
          },
        },
        fullScreen: false,
        lineNumbers: true,
        lineWrapping: true,
        mode: modeParts[modeParts.length - 1],
      });

      // set options
      Object.keys(options).map((key: string): void => {
        cm.setOption(key, options[key]);
      });

      // Mark form as changed if code editor content has changed
      cm.on('change', (): void => {
        textarea.value = cm.getValue();
        FormEngine.Validation.markFieldAsChanged(textarea);
      });

      const bottomPanel = this.createPanelNode('bottom', this.label);
      cm.addPanel(
        bottomPanel,
        {
          position: 'bottom',
          stable: false,
        },
      );

      // cm.addPanel() changes the height of the editor, thus we have to override it here again
      if (textarea.getAttribute('rows')) {
        const lineHeight = 18;
        const paddingBottom = 4;
        cm.setSize(null, parseInt(textarea.getAttribute('rows'), 10) * lineHeight + paddingBottom + bottomPanel.getBoundingClientRect().height);
      } else {
        // Textarea has no "rows" attribute configured, don't limit editor in space
        cm.getWrapperElement().style.height = (document.body.getBoundingClientRect().height - cm.getWrapperElement().getBoundingClientRect().top - 80) + 'px';
        cm.setOption('viewportMargin', Infinity);
      }

      this.loaded = true;
    });
  }
}