Add editor page

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/controllers/react_typescript_controller.ex

@@ -7,7 +7,7 @@ defmodule ComponentsGuideWeb.ReactTypescriptController do
     |> render("index.html", article: "tips")
   end
 
-  @articles ["testing", "forms", "event-handlers", "logical-clocks"]
+  @articles ["testing", "forms", "event-handlers", "logical-clocks", "editor"]
 
   def show(conn, %{"article" => article}) when article in @articles do
     render(conn, "index.html", article: article)

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/editor.html.eex

@@ -0,0 +1,87 @@
+<script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
+
+<script type="module">
+import * as esbuild from "https://cdn.jsdelivr.net/npm/[email protected]/esm/browser.min.js";
+const esbuildPromise = Promise.resolve(esbuild.initialize({
+  wasmURL: 'https://cdn.jsdelivr.net/npm/[email protected]/esbuild.wasm',
+}).then(() => esbuild));
+
+require.config({
+  paths: {
+    'vs': 'https://unpkg.com/monaco-editor@latest/min/vs'
+  }
+});
+
+const proxy = URL.createObjectURL(new Blob([`
+  self.MonacoEnvironment = {
+    baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
+  };
+  importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');
+`], { type: 'text/javascript' }));
+
+window.MonacoEnvironment = { getWorkerUrl: () => proxy };
+
+const theme = window.matchMedia &&
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+  ? 'vs-dark' : undefined;
+
+const value = `
+const a = 1 + 1;
+`.trim();
+
+const types = fetch("https://workers.cloudflare.com/index.d.ts", { cache: 'force-cache' })
+  .then((response) => response.text())
+  .catch((err) => `// ${err.message}`);
+
+require(["vs/editor/editor.main"], function () {
+  const typescript = monaco.languages.typescript;
+  for (const lang of [typescript.typescriptDefaults, typescript.javascriptDefaults]) {
+    lang.setCompilerOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: false
+    });
+    lang.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ESNext,
+      allowNonTsExtensions: true,
+      allowJs: true,
+    });
+    /* FIXME: types.then(([uri, content]) => lang.addExtraLib(content, uri)); */
+  }
+  const input = monaco.editor.create(document.getElementById('input'), {
+    language: 'typescript',
+    model: monaco.editor.createModel(value, 'typescript', 'ts:worker.ts'),
+    value,
+    theme,
+    minimap: false
+  });
+  console.log(input);
+  const output = monaco.editor.create(document.getElementById('output'), {
+    language: 'javascript',
+    value: '//',
+    theme,
+    readOnly: true,
+    minimap: false
+  });
+  const onEdit = () => {
+    const body = input.getValue();
+    esbuildPromise
+      .then(esbuild => esbuild.transform(body, { loader: 'jsx' }))
+      .then(content => output.getModel().setValue(content.code))
+      .catch((err) => output.getModel().setValue(err.message.replace(/^/gm, '// $&')));
+    /*fetch('/upload', { method: 'POST', body })
+      .then(async (response) => {
+        const content = await response.text();
+        return response.ok ? content : '// ' + content.trimEnd().split('\n').join('\n// ');
+      })
+      .then((content) => output.getModel().setValue(content))
+      .catch((err) => console.warn(err));*/
+  };
+  input.onDidChangeModelContent(onEdit);
+  const model = input.getModel();
+  model.setValue(input.getValue() + "\n");
+});
+</script>
+<div class="flex-container" id="container" style="display: flex; min-height: 100vh;">
+  <div id="input" style="flex: 1;"></div>
+  <div id="output" style="flex: 1;"></div>
+</div>

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/index.html.eex

@@ -4,7 +4,7 @@
 
 <article>
   <div class="text-white bg-gray-900">
-    <div class="content max-w-4xl mx-auto py-8 text-xl">
+    <div class="<%= @view_module.article_content_class(@article) %>">
       <%= render(@view_module, @article <> ".html", conn: @conn) %>
     </div>
   </div>

apps/components_guide_web/lib/components_guide_web/views/react_typescript_view.ex

@@ -17,6 +17,9 @@ defmodule ComponentsGuideWeb.ReactTypescriptView do
     "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
   end
 
+  def article_content_class("editor"), do: "content text-xl"
+  def article_content_class(_article), do: "content max-w-4xl mx-auto py-8 text-xl"
+
   def collected_image(conn, name) do
     %{static_path: path_to_image, width: width, height: height} = render(name)
     url = Routes.static_path(conn, "/" <> path_to_image)