blob: c461864241510e33b8f51b1c541fb7b66625336f [file] [log] [blame]
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '@gerritcodereview/typescript-api/gerrit';
import {PluginApi} from '@gerritcodereview/typescript-api/plugin';
import {html, LitElement} from 'lit';
import {customElement, property, query} from 'lit/decorators.js';
import {setScriptSrc} from './safe-script';
declare global {
interface HTMLElementTagNameMap {
'gr-editor': GrEditor;
}
}
/**
* This component just loads the CodeMirror js bundle lazily and converts the
* Gerrit preferences into CodeMirror params.
*/
@customElement('gr-editor')
export class GrEditor extends LitElement {
@property({type: String}) fileContent?: string;
@property({type: String}) fileType?: string;
@property({type: Number}) lineNum?: number;
@property({type: Object}) prefs?: unknown;
@property({type: Object}) plugin?: PluginApi;
@property({type: Boolean}) darkMode = false;
@query('#codemirror') mirror?: HTMLScriptElement;
override render() {
if (!window.customElements.get('codemirror-element')) return;
return html`
<codemirror-element
id="codemirror"
.lineNum=${this.lineNum}
.prefs=${this.prefs}
.fileContent=${this.fileContent}
.fileType=${this.fileType}
?darkMode=${this.darkMode}
>
</codemirror-element>
`;
}
override connectedCallback() {
super.connectedCallback();
this.loadCodeMirrorElement();
window.customElements.whenDefined('codemirror-element').then(() => {
this.requestUpdate();
});
}
private loadCodeMirrorElement() {
if (document.head.querySelector('#codemirror')) return;
const script = document.createElement('script');
script.id = 'codemirror';
script.crossOrigin = 'anonymous';
setScriptSrc(script, this.plugin?.url() ?? '');
document.head.appendChild(script);
}
}