From be7f2a2eba4b89f611618ee937a4054c745ee0fd Mon Sep 17 00:00:00 2001
From: Leo McArdle <leo@mca.is>
Date: Wed, 11 Dec 2024 13:16:37 +0000
Subject: [PATCH] chore(playground): migrate formatting to editor component

---
 client/src/playground/editor.js | 42 +++++++++++++++++++++++++++++++++
 client/src/playground/index.tsx | 35 +++++----------------------
 2 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/client/src/playground/editor.js b/client/src/playground/editor.js
index dc073b9d68d5..4047b6ef8e1c 100644
--- a/client/src/playground/editor.js
+++ b/client/src/playground/editor.js
@@ -108,6 +108,48 @@ export class PlayEditor extends LitElement {
     ];
   }
 
+  async format() {
+    const prettier = await import("prettier/standalone");
+    const config = (() => {
+      switch (this.language) {
+        case "javascript":
+          return {
+            parser: "babel",
+            plugins: [
+              import("prettier/plugins/babel"),
+              // XXX Using .mjs until https://github.com/prettier/prettier/pull/15018 is deployed
+              import("prettier/plugins/estree.mjs"),
+            ],
+          };
+        case "html":
+          return {
+            parser: "html",
+            plugins: [
+              import("prettier/plugins/html"),
+              import("prettier/plugins/postcss"),
+              import("prettier/plugins/babel"),
+              // XXX Using .mjs until https://github.com/prettier/prettier/pull/15018 is deployed
+              import("prettier/plugins/estree.mjs"),
+            ],
+          };
+        case "css":
+          return {
+            parser: "css",
+            plugins: [import("prettier/plugins/postcss")],
+          };
+        default:
+          return undefined;
+      }
+    })();
+    if (config) {
+      const plugins = await Promise.all(config.plugins);
+      this.value = await prettier.format(this.value, {
+        parser: config.parser,
+        plugins,
+      });
+    }
+  }
+
   /** @param {PropertyValues} changedProperties */
   willUpdate(changedProperties) {
     if (
diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
index b1e77612db77..65ea4160a6e2 100644
--- a/client/src/playground/index.tsx
+++ b/client/src/playground/index.tsx
@@ -1,13 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import useSWRImmutable from "swr/immutable";
-import prettier from "prettier/standalone";
-import prettierPluginBabel from "prettier/plugins/babel";
-import prettierPluginCSS from "prettier/plugins/postcss";
-// XXX Using .mjs until https://github.com/prettier/prettier/pull/15018 is deployed
-import prettierPluginESTree from "prettier/plugins/estree.mjs";
-import prettierPluginHTML from "prettier/plugins/html";
-
 import { Button } from "../ui/atoms/button";
 import { ReactPlayEditor, PlayEditor } from "./editor";
 import { SidePlacement } from "../ui/organisms/placement";
@@ -296,33 +289,17 @@ export default function Playground() {
   };
 
   const format = async () => {
-    const { html, css, js } = getEditorContent();
-
     try {
-      const formatted = {
-        html: await prettier.format(html, {
-          parser: "html",
-          plugins: [
-            prettierPluginHTML,
-            prettierPluginCSS,
-            prettierPluginBabel,
-            prettierPluginESTree,
-          ],
-        }),
-        css: await prettier.format(css, {
-          parser: "css",
-          plugins: [prettierPluginCSS],
-        }),
-        js: await prettier.format(js, {
-          parser: "babel",
-          plugins: [prettierPluginBabel, prettierPluginESTree],
-        }),
-      };
-      setEditorContent(formatted);
+      await Promise.all([
+        htmlRef.current?.format(),
+        cssRef.current?.format(),
+        jsRef.current?.format(),
+      ]);
     } catch (e) {
       console.error(e);
     }
   };
+
   const share = useCallback(async () => {
     const { url, id } = await save(getEditorContent());
     setSearchParams([["id", id]], { replace: true });