Improve Workshop submission editor

packages/custom-widgets/src/workbench/code-editor-toolbar.tsx

@@ -46,7 +46,11 @@ export function CodeEditorToolbar({
       <Group gap={6}>
         <IconCode size={16} aria-hidden />
         <Text size="xs" fw={600}>
-          {props.language === "jsx" ? props.messages.languageJsx : props.messages.languageJson}
+          {props.language === "jsx"
+            ? props.messages.languageJsx
+            : props.language === "css"
+              ? "CSS"
+              : props.messages.languageJson}
         </Text>
       </Group>
       <Group gap={6}>
@@ -102,7 +106,7 @@ export function CodeEditorToolbar({
             variant="subtle"
             leftSection={<IconWand size={14} />}
             onClick={onFormat}
-            disabled={props.language === "json" && formattedValue === props.value}
+            disabled={props.language !== "jsx" && formattedValue === props.value}
           >
             {props.messages.format}
           </Button>

packages/custom-widgets/src/workbench/code-editor-types.ts

@@ -43,7 +43,7 @@ export interface CustomWidgetCodeEditorProps {
   messages: CustomWidgetEditorMessages;
   description?: string;
   placeholder?: string;
-  language: "jsx" | "json";
+  language: "jsx" | "json" | "css";
   diagnostics?: EditorDiagnostic[];
   error?: ReactNode;
   required?: boolean;

packages/custom-widgets/src/workbench/code-editor.tsx

@@ -256,7 +256,7 @@ function EditorLoader() {
     </Group>
   );
 }
-function formatCode(value: string, language: "jsx" | "json") {
+function formatCode(value: string, language: "jsx" | "json" | "css") {
   if (language === "json") {
     try {
       return `${JSON.stringify(JSON.parse(value) as unknown, null, 2)}\n`;

packages/custom-widgets/src/workbench/direct-code-mirror.tsx

@@ -2,6 +2,7 @@
 
 import { autocompletion } from "@codemirror/autocomplete";
 import { indentWithTab } from "@codemirror/commands";
+import { css } from "@codemirror/lang-css";
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
@@ -18,7 +19,7 @@ import type { EditorDiagnostic } from "./analyzer";
 
 interface DirectCodeMirrorProps {
   value: string;
-  language: "jsx" | "json";
+  language: "jsx" | "json" | "css";
   diagnostics: EditorDiagnostic[];
   completions: Completion[];
   id: string;
@@ -103,7 +104,9 @@ function createExtensions(instanceId: string, props: DirectCodeMirrorProps) {
           autocompletion({ override: [createCustomJsxCompletionSource(props.completions)] }),
           customJsxComponentHover,
         ]
-      : [json()];
+      : props.language === "css"
+        ? [css()]
+        : [json()];
   return [
     basicSetup,
     ...language,