@teipublisher/pb-components/src/pb-code-editor.js

Collection of webcomponents underlying TEI Publisher

import { LitElement, html, css } from 'lit-element';
import '@jinntec/jinn-codemirror/dist/src/jinn-codemirror';
import '@jinntec/jinn-codemirror/dist/src/xml-editor';
import '@jinntec/jinn-codemirror/dist/src/epidoc-editor';
import { translate } from './pb-i18n.js';
import { pbMixin } from './pb-mixin.js';

/**
 * A code editor based on codemirror 6. Provides a wrapper around
 * [@jinntec/jinn-codemirror](https://github.com/JinnElements/jinn-codemirror),
 * mainly for backwards compatibility.
 *
 * @deprecated directly use `jinn-codemirror`/`jinn-xml-editor`/`jinn-epidoc-editor` instead, which are
 * included in the `pb-code-editor` bundle.
 */
export class PbCodeEditor extends pbMixin(LitElement) {
  static get properties() {
    return {
      ...super.properties,
      /**
       * the code as a string
       */
      code: {
        type: String,
        reflect: true,
      },
      /**
       * the language mode e.g. 'javascript' or 'xquery'.
       */
      mode: {
        type: String,
      },
      /**
       * label for the editor
       */
      label: {
        type: String,
      },
      /**
       * placeholder if code is empty
       */
      placeholder: {
        type: String,
      },
      /**
       * tab indent size
       */
      tabSize: {
        type: Number,
      },
      linter: {
        attribute: true,
      },
    };
  }

  constructor() {
    super();

    this.code = '';
    this.mode = 'xml';
    this.placeholder = 'odd.editor.model.empty';
    this.tabSize = 2;
    this.label = '';
    this.linter = '';
    this._editor = null;
  }

  connectedCallback() {
    super.connectedCallback();
  }

  firstUpdated() {
    super.firstUpdated();

    this._editor = this.shadowRoot.getElementById('editor');
    // this._editor.addEventListener('update', () => {
    //     this._setCode(this._editor.content);
    // })
  }

  render() {
    return html`
      <div class="label">${this.label}</div>
      <jinn-codemirror
        id="editor"
        mode="${this.mode}"
        code="${this.code}"
        placeholder="${translate(this.placeholder)}"
      ></jinn-codemirror>
    `;
  }

  getSource() {
    if (!this._editor) {
      return '';
    }
    return this._editor.value;
  }

  _setCode() {
    this.dispatchEvent(
      new CustomEvent('code-changed', {
        composed: true,
        bubbles: true,
        detail: { code: this.getSource() },
      }),
    );
  }

  refresh() {}

  static get styles() {
    return css`
      :host {
        display: block;
        width: 100%;
        margin: 0;
        position: relative;
        color: inherit;
      }

      #editor {
        width: 100%;
        height: auto;
      }

      .label {
        color: var(--paper-grey-500);
        margin-bottom: 5px;
      }
    `;
  }
}
customElements.define('pb-code-editor', PbCodeEditor);