astro-code-editor

🚀  Astro — Code Editor 📝

Embed code editors for YAML, Markdown, JS / TS, JSON…
Specifically tailored for each language.

Powered by the Monaco Editor + curated languages helpers.

Goal is to simplify configuration in nicely wrapped, type-safe Astro components, with easy access to created instances, browser side, thanks to Custom Elements.

---

Warning
🚧  Work-in-progress.

📦  Installation

pnpm i astro-code-editor

Supported languages

Because each language can have their set of settings and externally loaded libraries (like language servers, snippets, typings…), choice has been made to separate them instead of providing a one-size-fit-all editor.

YAML

Using monaco-yaml with YAML language server under the hood.

Monaco YAML live demo / Repository.

Features advanced JSON schema validation / auto-completion, far superior to remark-lint-frontmatter-schema (however this one has the advantage of working in VS Code etc.).

Accepts Markdown input value with front matter automatic extraction.

See the component interface.

Markdown

Soon…

JS / TS

Soon…

JSON

Soon…

🛠  Usage

YAML editor

Full working example:

---
// E.g. `src/pages/editor-demos.astro`

import YAMLEditor from 'astro-code-editor/YAMLEditor.astro';
import Layout from '../layouts/Bare.astro';

/* Remote schema URI — Example: JSON Schema core meta schema */
const coreMetaSchemaUrl = 'http://json-schema.org/draft-07/schema#';

/* —OR— from your Astro `public` folder */
const mySchema = '/schemas/my-schema.yaml';

/* You can use Markdown with frontmatter as source too, not only pure YAML */
const initialValue = `---
title: Hello
description: World
---

# Hello
`;
---

<Layout>
  <header><h1>Demos page!</h1></header>

  <main>
    <editor-demos>
      <section>
        <YAMLEditor
          data-yaml-demo-editor
          schemaUrlRef={coreMetaSchemaUrl}
          value={initialValue}
          extractMarkdownFrontmatter
        />

        <hr />

        <button data-clear>Clear text</button>
      </section>

      <section>…</section>
    </editor-demos>

    <hr />

    <section><em>That's a wrap!</em></section>
  </main>

  <footer>© {new Date().getFullYear()}</footer>
</Layout>

<script>
  // Use YAMLEditor Custom Elem. class definition, for type discrimination below
  import YAMLEditor from 'astro-code-editor/YAMLEditor.client.js';

  // Create a Custom Element for housing our demos (totally optional)

  class EditorDemos extends HTMLElement {
    connectedCallback() {
      const clearButtonElement = this.querySelector('[data-clear]');
      if (!(clearButtonElement instanceof HTMLButtonElement)) return;

      // Assert the createdMonaco editor + model

      const editor = this.querySelector('[data-yaml-demo-editor]');
      if (!(editor instanceof YAMLEditor)) return;

      const model = editor?.model;
      if (!model) return;

      // Current instance model methods are now auto-completed in your IDE
      // `model: editor.ITextModel`

      clearButtonElement.addEventListener('click', () => {
        model.setValue(`# CLEARED! ${new Date().toLocaleString()}`);
      });
    }
  }

  customElements.define('editor-demos', EditorDemos);
</script>

<style lang="scss">
  editor-demos {
    display: block;
    width: 100%;

    & > section {
      max-width: 60vw;
      margin: 0 auto;
    }

    // Editors styles
    // /!\ Don't forget to set editor dimensions /!\

    [data-yaml-demo-editor] {
      width: 800px;
      height: 600px;
    }
  }

  // Other page styles…

  header {
    text-align: center;
    padding-bottom: 4rem;
  }

  footer {
    padding-top: 4rem;
    text-align: center;
  }

  main {
    width: 100%;
  }
</style>

---

LIVE DEMO  🎭  DOCUMENTATION WEBSITE ⎋

code.juliancataldo.com

---

🔗  JulianCataldo.com