Monaco Input

<nve-monaco-input language="typescript" value="console.log('Hello, world!');"></nve-monaco-input>
<script type="module">
  const input = document.querySelector("nve-monaco-input");
  input.addEventListener("input", () => console.log("input: ", input.value));
  input.addEventListener("change", () => console.log("change: ", input.value));
</script>

<nve-monaco-input value="console.log('Hello, world!');" line-numbers="on" folding minimap side-by-side></nve-monaco-input>

<nve-monaco-input readonly value="console.log('Hello, world!');"></nve-monaco-input>

<nve-monaco-input value="console.log('Hello, world!');" disabled></nve-monaco-input>

<form id="json-schema-validation-example" nve-layout="column gap:lg">
  <nve-control style="width: 100%">
    <label>JSON Configuration</label>
    <nve-monaco-input nve-control name="config" language="json"></nve-monaco-input>
    <nve-control-message>JSON schema validation errors will prevent form submission</nve-control-message>
  </nve-control>
  <nve-button type="submit">Submit</nve-button>
</form>

<script type="module">
  const form = document.querySelector("form#json-schema-validation-example");
  const input = form.querySelector("nve-monaco-input");
  input.schema = {
    type: "object",
    properties: {
      name: { type: "string", description: "Project name" },
      version: { type: "string", pattern: "^\\d+\\.\\d+\\.\\d+$", description: "Semantic version number" },
      description: { type: "string", description: "Project description" },
    },
    required: ["name", "version"],
  };
  input.value = JSON.stringify(
    {
      name: "my-app",
      version: "1.0.0",
    },
    null,
    2,
  );

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    console.log("Form data:", {
      config: formData.get("config"),
    });
  });
</script>

<form id="typescript-validation-example" nve-layout="column gap:lg">
  <nve-control style="width: 100%">
    <label>TypeScript Code</label>
    <nve-monaco-input nve-control name="code" language="typescript"></nve-monaco-input>
    <nve-control-message>TypeScript validation errors will prevent form submission</nve-control-message>
  </nve-control>
  <nve-button type="submit">Submit</nve-button>
</form>

<script type="module">
  const form = document.querySelector("form#typescript-validation-example");
  const input = form.querySelector("nve-monaco-input");
  input.value = 'const x: number = "string"; // Type error';

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    console.log("Form data:", {
      code: formData.get("code"),
    });
  });
</script>