Repository: dprint/dprint (language: rust)

Issue:
Add pretty_yaml, malva, markup_fmt to playground and `dprint init`
We'll need to update this file first:

https://github.com/dprint/plugins/blob/main/info.json

Then update the website/playground folder.

FYI @g-plane in case you're interested in taking this one on.


Discussion / hints:
PR: https://github.com/dprint/plugins/pull/19
Thanks! It's working:

![image](https://github.com/dprint/dprint/assets/1609021/8596fdfa-5d79-4e9f-a7dd-288691ea1fbd)

I'll open PR for updating playground later.

Fix patch:
diff --git a/website/playground/config-overrides.js b/website/playground/config-overrides.js
index 1a2421607..eb484da1c 100644
--- a/website/playground/config-overrides.js
+++ b/website/playground/config-overrides.js
@@ -4,7 +4,7 @@ module.exports = function override(config, env) {
   config.plugins = [
     ...config.plugins,
     new MonacoWebpackPlugin({
-      languages: ["json", "typescript", "markdown"],
+      languages: ["json", "typescript", "markdown", "css", "html", "yaml"],
     }),
   ];
 
diff --git a/website/playground/src/components/CodeEditor.tsx b/website/playground/src/components/CodeEditor.tsx
index adfcd9e1e..543cca610 100644
--- a/website/playground/src/components/CodeEditor.tsx
+++ b/website/playground/src/components/CodeEditor.tsx
@@ -11,7 +11,7 @@ export interface CodeEditorProps {
   scrollTop?: number;
   jsonSchemaUrl?: string;
   onScrollTopChange?: (scrollTop: number) => void;
-  language: "typescript" | "json" | "markdown" | "toml" | "dockerfile" | "plaintext" | undefined;
+  language: "typescript" | "json" | "markdown" | "toml" | "dockerfile" | "plaintext" | "css" | "html" | "yaml" | undefined;
 }
 
 export interface CodeEditorState {
diff --git a/website/playground/src/plugins/getPluginUrls.ts b/website/playground/src/plugins/getPluginUrls.ts
index 734d2e802..0ef35b169 100644
--- a/website/playground/src/plugins/getPluginUrls.ts
+++ b/website/playground/src/plugins/getPluginUrls.ts
@@ -14,12 +14,28 @@ export async function getPluginUrls(signal: AbortSignal): Promise<string[]> {
   const dockerfilePlugin = json.latest.find((p: any) => p.configKey === "dockerfile")!;
   const biomePlugin = json.latest.find((p: any) => p.configKey === "biome")!;
   const ruffPlugin = json.latest.find((p: any) => p.configKey === "ruff")!;
+  const malvaPlugin = json.latest.find((p: any) => p.configKey === "malva")!;
+  const markupFmtPlugin = json.latest.find((p: any) => p.configKey === "markup")!;
+  const prettyYamlPlugin = json.latest.find((p: any) => p.configKey === "yaml")!;
 
-  return [typescriptPlugin.url, jsonPlugin.url, markdownPlugin.url, tomlPlugin.url, dockerfilePlugin.url, biomePlugin.url, ruffPlugin.url];
+  return [
+    typescriptPlugin.url,
+    jsonPlugin.url,
+    markdownPlugin.url,
+    tomlPlugin.url,
+    dockerfilePlugin.url,
+    biomePlugin.url,
+    ruffPlugin.url,
+    malvaPlugin.url,
+    markupFmtPlugin.url,
+    prettyYamlPlugin.url,
+  ];
 }
 
+const RE_PLUGIN_URL = /https:\/\/plugins\.dprint\.dev\/(?:[a-z_-]+\/)?([a-z_-]+)-v?[0-9]+\.[0-9]+\.[0-9]+\.wasm$/;
+
 export function getPluginShortNameFromPluginUrl(url: string) {
-  const result = /https:\/\/plugins\.dprint\.dev\/([a-z]+)-[0-9]+\.[0-9]+\.[0-9]+\.wasm$/.exec(url);
+  const result = RE_PLUGIN_URL.exec(url);
   const name = result?.[1];
   switch (name) {
     case "typescript":
@@ -29,6 +45,9 @@ export function getPluginShortNameFromPluginUrl(url: string) {
     case "dockerfile":
     case "biome":
     case "ruff":
+    case "malva":
+    case "markup_fmt":
+    case "pretty_yaml":
       return name;
     default:
       return undefined;
@@ -36,7 +55,7 @@ export function getPluginShortNameFromPluginUrl(url: string) {
 }
 
 export function getLanguageFromPluginUrl(url: string) {
-  const result = /https:\/\/plugins\.dprint\.dev\/([a-z]+)-[0-9]+\.[0-9]+\.[0-9]+\.wasm$/.exec(url);
+  const result = RE_PLUGIN_URL.exec(url);
   const language = result?.[1];
   switch (language) {
     case "typescript":
@@ -50,6 +69,12 @@ export function getLanguageFromPluginUrl(url: string) {
     case "ruff":
       // todo: specify python here eventually (probably need to upgrade the code editor)
       return "plaintext";
+    case "malva":
+      return "css";
+    case "markup_fmt":
+      return "html";
+    case "pretty_yaml":
+      return "yaml";
     default:
       return undefined;
   }
diff --git a/website/playground/src/utils/UrlSharer.ts b/website/playground/src/utils/UrlSharer.ts
index 1c2504936..b07c7baf9 100644
--- a/website/playground/src/utils/UrlSharer.ts
+++ b/website/playground/src/utils/UrlSharer.ts
@@ -8,6 +8,10 @@ export const knownPlugins = new Set([
   "dockerfile",
   "biome",
   "ruff",
+  // third party plugins, but user name is removed because there can't be `/` in the url
+  "malva",
+  "markup_fmt",
+  "pretty_yaml",
 ]);
 
 export class UrlSaver {
diff --git a/website/src/plugins/malva.md b/website/src/plugins/malva.md
index 239d0f4b6..e63472480 100644
--- a/website/src/plugins/malva.md
+++ b/website/src/plugins/malva.md
@@ -25,7 +25,7 @@ dprint config add g-plane/malva
 
 This will update your config file to have an entry for the plugin. Then optionally specify a `"malva"` property to add configuration:
 
-```jsonc
+```json
 {
   "malva": {
     // malva config goes here
@@ -39,3 +39,7 @@ This will update your config file to have an entry for the plugin. Then optional
 ## Configuration
 
 See [Configuration](/plugins/malva/config)
+
+## Playground
+
+See [Playground](https://dprint.dev/playground#plugin/malva)
diff --git a/website/src/plugins/markup_fmt.md b/website/src/plugins/markup_fmt.md
index 415af7c88..c5dc33a69 100644
--- a/website/src/plugins/markup_fmt.md
+++ b/website/src/plugins/markup_fmt.md
@@ -25,7 +25,7 @@ dprint config add g-plane/markup_fmt
 
 This will update your config file to have an entry for the plugin. Then optionally specify a `"markup"` property (not `"markup_fmt"`) to add configuration:
 
-```jsonc
+```json
 {
   "markup": { // not "markup_fmt"
     // markup_fmt config goes here
@@ -39,3 +39,7 @@ This will update your config file to have an entry for the plugin. Then optional
 ## Configuration
 
 See [Configuration](/plugins/markup_fmt/config)
+
+## Playground
+
+See [Playground](https://dprint.dev/playground#plugin/markup_fmt)
diff --git a/website/src/plugins/pretty_yaml.md b/website/src/plugins/pretty_yaml.md
index cd5177329..65640fc95 100644
--- a/website/src/plugins/pretty_yaml.md
+++ b/website/src/plugins/pretty_yaml.md
@@ -25,7 +25,7 @@ dprint config add g-plane/pretty_yaml
 
 This will update your config file to have an entry for the plugin. Then optionally specify a `"yaml"` property to add configuration:
 
-```jsonc
+```json
 {
   "yaml": { // not "pretty_yaml"
     // Pretty YAML config goes here
@@ -39,3 +39,7 @@ This will update your config file to have an entry for the plugin. Then optional
 ## Configuration
 
 See [Configuration](/plugins/pretty_yaml/config)
+
+## Playground
+
+See [Playground](https://dprint.dev/playground#plugin/pretty_yaml)


Test patch: