Class CsskitViewer

website/script/index.js:316–561

}

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

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

  compartment = new Compartment();

  extensions = [
    csskitLight,
    EditorView.editable.of(false),
    foldGutter(),
    EditorView.lineWrapping,
    this.compartment.of(css()),
    // Change language according to the current view
    EditorState.transactionExtender.of((tr) => {
      if (!tr.docChanged) return null;
      let format =
        this.format === "minify" || this.format === "format" ? css() : json();
      return {
        effects: this.compartment.reconfigure(format),
      };
    }),
    EditorView.domEventHandlers({ mouseover: (e) => this.handleEvent(e) }),
  ];

  get format() {
    const form = new FormData(
      document.getElementById(this.getAttribute("for-format")),
    );
    return form.get("format");
  }

  get formatOptions() {
    const form = new FormData(
      document.getElementById(this.getAttribute("for-format")),
    );
    const options = {};
    for (const [key, value] of form.entries()) {
      if (key === "format" || value === "") continue;
      if (key === "indent_width") {
        const width = Number(value);
        if (Number.isFinite(width)) {
          options[key] = width;
        }
        continue;
      }
      options[key] = value;
    }
    return options;
  }

  get code() {
    return document.getElementById(this.getAttribute("for-editor")).code;
  }

  handleEvent(event) {