Class CodeEditor

components/code-editor/src/code-editor.ts:11–162

@customElement('code-editor')
export class CodeEditor extends LitElement {
  @property({
    type: String,
  })
  startText: Lazy<string>;
  @property({ type: String }) copyText = 'Copy Manifest';
  @property({ type:  String}) editorStateType: string = 'json';
  @property({ type: Boolean }) readOnly = false;

  @state()
  editorState: Lazy<EditorState>;

  @state() editorView: Lazy<EditorView>;

  @state() editorId: string;

  @state() editorEmitter = emitter;

  @state() copied = false;

  protected static editorIdGenerator = increment();

  static get styles() {
    return [
      css`

        :host {
          position: relative;
        }

        sl-button::part(base) {
          --sl-button-font-size-medium: 14px;
        }
        
        #copy-block {
          display: flex;
          justify-content: flex-end;
          margin-bottom: 10px;
          position: sticky;
          top: 0;
          z-index: 1;
        }

        .editor-container {
          font-size: 14px;
        }
      `,
    ];
  }

  constructor() {
    super();

    this.editorId = `editor-${CodeEditor.editorIdGenerator.next().value}`;

    this.editorEmitter.addEventListener(
      CodeEditorEvents.sync,
      (event: Event) => {