svelte-codemirror-editor

Loading editor...
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      html {
        font-family: sans-serif;
      }

      h1 {
        text-align: center;
        margin-bottom: 3rem;
      }  

      main {
        margin: 2rem 0;
      }
    </style>
  </head>
  <body>
    <h1>Hello world!</h1>
    <main>
      <p>Welcome on Codemirror</p>
    </main>
    <script>
      /**
       * Reduce calls to the passed function.
       *
       * @param func - Function to debounce.
       * @param threshold - The delay to avoid recalling the function.
       * @param execAsap - If true, the Function is called at the start of the threshold, otherwise the Function is called at the end of the threshold.
       */
      function debounce(func, threshold, execAsap = false) {
        let timeout;

        return function debounced(...args) {
          const self = this;

          if (timeout) clearTimeout(timeout);
          else if (execAsap) func.apply(self, args);

          timeout = setTimeout(delayed, threshold || 100);

          function delayed() {
            if (!execAsap) func.apply(self, args);
            timeout = null;
          }
        };
      }
    </script>
  </body>
</html>