Class CsskitEditor

website/script/index.js:204–297

}

class CsskitEditor extends HTMLElement {
  static define(tagName = "csskit-editor") {
    customElements.define(tagName, this);
  }

  get code() {
    return this.view.state.doc.toString();
  }

  shadowRoot = this.attachShadow({ mode: "open" });

  extensions = [
    basicSetup,
    EditorView.lineWrapping,
    csskitLight,
    css(),
    lintGutter(),
    EditorView.domEventHandlers({
      mouseover: (e) => this.handleEvent(e),
      click: (e) => this.handleEvent(e),
    }),
    EditorView.updateListener.of((view) => {
      if (view.startState.doc.toString() !== view.state.doc.toString()) {
        this.dispatchEvent(new EditorChangeEvent(this.code));
      }
    }),
  ];

  async connectedCallback() {
    let doc =
      await (codeFromUrl.has()
        ? codeFromUrl.get()
        : codeFromLocal.has()
        ? codeFromLocal.get()
        : this.textContent);
    this.view = new EditorView({
      extensions: this.extensions,
      parent: this.shadowRoot,
      root: this.shadowRoot,
      doc,
    });
    requestAnimationFrame(() =>
      this.dispatchEvent(new EditorChangeEvent(this.code))
    );
    this.ownerDocument.addEventListener("diagnostic", this);
    this.ownerDocument.addEventListener("viewer-highlight", this);
    this.ownerDocument.addEventListener("load-code", this);
    this.addEventListener("focusout", this);
    this.addEventListener("focusin", this);
  }

  handleEvent(event) {
    if (event.type == "diagnostic") {
      this.view.dispatch(setDiagnostics(this.view.state, event.diagnostics));
    } else if (event.type == "focusout") {
      codeFromUrl.set(event.target.code);
      codeFromLocal.set(event.target.code);
    } else if (event.type == "viewer-highlight") {