_index.html

---
title: "Playground"
weight: 400
type: playground
layout: index
url: "/playground"
description: Write your own language on the left and try out your own language edtor on the right.
geekdochidden: false
draft: false
noMain: true
playground: true
---
<link rel="preload" as="script" href="./libs/worker/common.js"/>
<link rel="preload" as="script" href="./libs/worker/langiumServerWorker.js"/>
<link rel="preload" as="script" href="./libs/worker/userServerWorker.js"/>
<script type="module">
    import { addMonacoStyles, setupPlayground, share, overlay, getPlaygroundState, MonacoEditorLanguageClientWrapper } from "./libs/worker/common.js";
  import { buildWorkerDefinition } from "../libs/monaco-editor-workers/index.js";

  addMonacoStyles('monaco-styles-helper');

  buildWorkerDefinition(
    "../libs/monaco-editor-workers/workers",
    new URL("", window.location.href).href,
    false
  );

  // on doc load
  addEventListener('load', function() {

    // get a handle to our various interactive buttons
    const copiedHint = document.getElementById('copiedHint');
    const shareButton = document.getElementById('shareButton');
    const grammarRoot = document.getElementById('grammar-root');
    const contentRoot = document.getElementById('content-root');

    // register a listener for the share button
    shareButton.onclick = () => {
      // retrieve the current playground state (grammar + content/program)
      const playgroundState = getPlaygroundState();
      share(playgroundState.grammar, playgroundState.content);

      // update the display to indicate that the text has been shared
      shareButton.src = '/assets/checkmark.svg';
      copiedHint.style.display = 'block';

      // reset again after a second...
      setTimeout(() => {
        shareButton.src = '/assets/share.svg';
        copiedHint.style.display = 'none';
      }, 1000);
    };

    const treeButton = document.getElementById('treeButton');
    const grid = document.getElementById('grid');
    const key = 'display-ast';
    if(localStorage.getItem(key) === 'yes') {
      grid.classList.toggle('without-tree');
    }
    treeButton.onclick = () => {
      const shown = !grid.classList.toggle('without-tree');
      localStorage.setItem(key, shown ? 'yes' : 'no');
      const resizeEvent = new Event('resize');
      window.dispatchEvent(resizeEvent);
    };

    const url = new URL(window.location.toString());
    const grammar = url.searchParams.get('grammar');
    const content = url.searchParams.get('content');

    setupPlayground(
      grammarRoot,
      contentRoot,
      grammar,
      content,
      overlay
    );
  });
</script>